建模工具提示时遇到问题标题为'左拉'

Question

对于下面的饼图，我有一个工具提示，它以表格格式构建并显示在悬停事件上。

var app = angular.module('plunker', ['nvd3']); 

app.controller('MainCtrl', function($scope) { 
    $scope.options = { 
     chart: { 
      type: 'pieChart', 
      height: 500, 
      x: function(d){return d.key;}, 
      y: function(d){return d.y;}, 
      noData: '0 incidents', 
      color:['#CE1B1F', '#FFC455', '#00A6CD'], 
      showLabels: false, 
      duration: 500, 
      labelThreshold: 0.01, 
      labelSunbeamLayout: true, 
      legend: { 
       margin: { 
        top: 5, 
        right: 35, 
        bottom: 5, 
        left: 0 
       } 
      }, 
      tooltip: { 
      contentGenerator: function (e) { 
       var series = e.series[0]; 
       if (series.value === null) return; 

       var header = 
       "<thead>" + 
        "<tr>" + 
        "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" + 
        "<td class='key'><strong>" + series.key + "</strong></td>" + 
        "</tr>" + 
       "</thead>"; 

       var rows = 
       "<tr>" + 
        "<td class='key'>" + series.key + '- #3: ' + "</td>" + 
        "<td class='x-value'>" + e.data.MyAttribute1 + "</td>" + 
       "</tr>" + 
       "<tr>" + 
        "<td class='key'>" + series.key + '- #5: ' + "</td>" + 
        "<td class='x-value'>" + e.data.MyAttribute2 + "</td>" + 
       "</tr>"; 

       return "<table>" + 
        header + 
        "<tbody>" + 
        rows + 
        "</tbody>" + 
       "</table>"; 
      } 
      }     

     } 
    }; 

    $scope.data = [ 
     { 
      key: "CAT I", 
      y: 2, 
      MyAttribute1:"DLA Avn ... CAT I", 
      MyAttribute2:"DLA Energy ... CAT I" 
     }, 
     { 
      key: "CAT II", 
      y: 1, 
      MyAttribute1:"DLA Avn ... CAT II", 
      MyAttribute2:"DLA Energy ... CAT II" 
     }, 
     { 
      key: "CAT III", 
      y: 3, 
      MyAttribute1:"DLA Avn ... CAT III", 
      MyAttribute2:"DLA Energy ... CAT III" 
     }, 
    ]; 
}); 

我无法作出提示头（series.key）直接对准了series.color财产的权利。现在它显示在中心。我尝试注入一个左拉和一个左拉，但它没有改变任何东西。

这里有一个plunkr向您显示工具提示： http://plnkr.co/edit/2SFzP96OIRyGhtM3j5Cp?p=preview

Answer 1

工具提示由表使正在发生的事情是这样的：

---------------------- 
Color  | CAT 1 
---------------------- 
CAT III- #3: |   
---------------------- 

尝试移动<strong>" + series.key + "</strong>进入后的表行上方像这样的股利：

<td colspan="2" class='legend-color-guide'><div style='background-color: " + series.color + ";'></div><strong>" + series.key + "</strong></td> 

然后取出<td class='key'><strong>" + series.key + "</strong></td>

这将允许你以你想要的方式来设计风格。最重要的部分是列跨度=“2”

参考： http://www.w3schools.com/tags/att_td_colspan.asp

   var header = 
       "<thead>" + 
        "<tr>" + 
        "<td colspan='2' class='legend-color-guide'><div style='background-color: " + series.color + ";'><strong>" + series.key + "</strong></div></td>" + 
        "</tr>" + 
       "</thead>";