2

我正在尝试在谷歌条形图中使用工具提示，并且遇到了一个奇怪的问题，我的工具提示仅在我的数据表的第一行没有工具提示时才有效。

当我这样做时，图表不会呈现：

function drawVisualization() {
  // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
    ['Report','Ineffective', 'Developing', 'Effective', 'Highly Effective'],
    ['Growth Rating',{v:18, f:'tooltip text'},{v:12, f:'tooltip text'},{v:66, f:'tooltip text'},{v:4, f:'tooltip text'}],
    ['Composite Rating',{v:6, f:'tooltip text'},{v:12, f:'tooltip text'},{v:58, f:'tooltip text'},{v:25, f:'tooltip text'}]
  ]);

  // Create and draw the visualization.
     new google.visualization.BarChart(document.getElementById('chart_div')).
      draw(data,
       {title:"TITLE",
        colors: ['#638FBC','#FFE17C','#FFA87C','#204C7A'],
        hAxis: {title: "Percent of Educators", viewWindow:{max:105, min:0}, titleTextStyle: {italic: false}},
        chartArea: {width: "60%"},
       isStacked: true}
      );
}

但如果我这样做，图表会很好

function drawVisualization() {
  // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
    ['Report','Ineffective', 'Developing', 'Effective', 'Highly Effective'],
    ['Empty', 0 ,   0 , 0   , 0   ],
    ['Growth Rating',{v:18, f:'tooltip text'},{v:12, f:'tooltip text'},{v:66, f:'tooltip text'},{v:4, f:'tooltip text'}],
    ['Composite Rating',{v:6, f:'tooltip text'},{v:12, f:'tooltip text'},{v:58, f:'tooltip text'},{v:25, f:'tooltip text'}]
  ]);

  // Create and draw the visualization.
     new google.visualization.BarChart(document.getElementById('chart_div')).
      draw(data,
       {title:"TITLE",
        colors: ['#638FBC','#FFE17C','#FFA87C','#204C7A'],
        hAxis: {title: "Percent of Educators", viewWindow:{max:105, min:0}, titleTextStyle: {italic: false}},
        chartArea: {width: "60%"},
       isStacked: true}
      );

我不知道为什么添加额外的行使它起作用。

任何帮助将不胜感激。

4

1 回答 1

1

这是因为目前对 arrayToDataTable 中的 {v:,f:} 单元格的支持有点参差不齐。我们将在库的下一版本中发布对此的修复。同时，您可以像这样使用 google.visualization.DataTable 构造函数：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Report');
data.addColumn('string', 'Developing');
data.addColumn('string', 'Effective');
data.addColumn('string', 'Highly Effective');
data.addRows([
  ['Growth Rating',{v:18, f:'tooltip text'},{v:12, f:'tooltip text'},{v:66, f:'tooltip text'},{v:4, f:'tooltip text'}],
  ['Composite Rating',{v:6, f:'tooltip text'},{v:12, f:'tooltip text'},{v:58, f:'tooltip text'},{v:25, f:'tooltip text'}]
]);
于 2013-06-26T16:21:40.597 回答