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

Question

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

我用来创建图表的数据如下所示(完美工作):

['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.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

Material 图表不支持 Column Roles

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

---

Material = google.charts.Bar -- 包:['bar']

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

---

有一个选项可以让Classic看起来类似于Material...

theme: 'material'

请参阅以下工作片段...

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 不应再用于加载图表库，
根据发行说明...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

这只会改变 load 语句，见上面的片段......