Question

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

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

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}
      );

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

非常感谢任何帮助。

Answer 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'}]
]);

Google Charts工具提示仅适用于没有工具提示的第一行

1 个答案: