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'

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

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的预发行版。从现在开始，请使用新的静态loader.js。

这只会更改load语句，请参见上面的片段...

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

1 个答案: