javascript - 在谷歌柱形图中的条上显示类型名称

Question

我正在使用谷歌柱形图。

到目前为止，我得到了我的图表，如下图所示。

在这里，我在每个类别中有两列。我想通过它们的类型（Type-1，Type-2）来区分它们，如下图所示。我该怎么做，这有没有可能。

Answer 1

您可以将数据列角色用于 -->'annotation'

该'annotation'列应遵循它在数据表中表示的每个值

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Category Type');
  data.addColumn('number', 'Type-1');
  data.addColumn({role: 'annotation', type: 'string'});
  data.addColumn('number', 'Type-2');
  data.addColumn({role: 'annotation', type: 'string'});
  data.addRows([
    ['Pri #1:', 4000, 'Type-1', 5000, 'Type-2'],
    ['Pri #2:', 6000, 'Type-1', 8000, 'Type-2'],
    ['Pri #3:', 1500, 'Type-1', 3000, 'Type-2'],
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(data, {
    annotations: {
      alwaysOutside: true
    }
  });
});

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