带有 ArrayToDataTable 的 Google 柱形图工具提示

Question

我正在尝试在 Google 条形图表中显示每个系列的一些文本。

我用来创建图表的数据如下所示（完美运行）：

['Months', 'XXX', {type: 'string', role: 'tooltip'}, 'YYY', {type: 'string', role: 'tooltip'}, 'ZZZ', {type: 'string', role: 'tooltip'}, 'TTT', {type: 'string', role: 'tooltip'}], 
['Sep', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m']
['Oct', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m', 0, '00 h 00 m']
...

但是，我无法显示工具提示（或注释，没关系）。

我尝试加载很多版本的 Google 软件包。我目前使用以下：

google.charts.load('visualization', '1',  {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {      
    var data = google.visualization.arrayToDataTable([
      ...
    ]);

    var options = {             
        height: 300,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Flight Hours (min)'
        },
        title: 'Annual Statistics',                       
        bar: { groupWidth: '90%' },
    };


    var chart = new google.charts.Bar(document.getElementById('myPieChart'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }

你能帮帮我吗？

Answer 1

材质图表不支持Column Roles

为了提供注释或自定义工具提示，您必须使用经典图表

---

材料 = google.charts.Bar -- packages: ['bar']

经典 = google.visualization.ColumnChart -- packages: ['corechart']

---

有一个选项可以让 Classic 看起来 相似 与 Material...

theme: 'material'

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Months', 'XXX', {type: 'string', role: 'tooltip'}, 'YYY', {type: 'string', role: 'tooltip'}, 'ZZZ', {type: 'string', role: 'tooltip'}, 'TTT', {type: 'string', role: 'tooltip'}],
    ['Sep', 5, '00 h 00 m', 6, '00 h 00 m', 7, '00 h 00 m', 8, '00 h 00 m'],
    ['Oct', 5, '00 h 00 m', 6, '00 h 00 m', 7, '00 h 00 m', 8, '00 h 00 m']
  ]);

  var options = {
    height: 300,
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Flight Hours (min)'
    },
    title: 'Annual Statistics',
    bar: {groupWidth: '90%'},
    theme: 'material'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

注意： jsapi 不应再用于加载图表库，
根据发行说明...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。出于安全目的，最后一次更新是 v45 的预发布版本。从现在开始请使用新的 gstatic loader.js。

这只会改变load语句，见上面的sn-p...