条形图/柱形图 - 同一系列上具有相同颜色的条形图

Question

我想我已经尝试了所有方法，但我无法解决这个问题。

对于每个公司，我需要用该公司的颜色分组并显示 3 个条形图，并为每个条形图显示注释。

我只能得到这样的东西：

但是我真正需要的是这样的：

我已经失去了超过 1 天的搜索时间，我已经尝试了所有方法，但我找不到解决方案...

这是我现在的代码：

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

  var chart; var data; var options;

  function drawChart() {
    dataTable = new google.visualization.DataTable();

    dataTable.addColumn('string', 'Company');
    dataTable.addColumn({ label: 'Total', type: 'number', role: 'style', role: 'annotation' });
    dataTable.addColumn({ label: 'Sales', type: 'number', role: 'style', role: 'annotation' });
    dataTable.addColumn({ label: 'Expenses', type: 'number', role: 'style', role: 'annotation' });

    data.addRow(['Cristal',
                { v: 1400, color: '#b87333', annotation: 'All' },
                { v: 1000, color: '#b87333', annotation: 'S' },
                { v: 400, color: '#b87333', annotation: 'E' }]);

    data.addRow(['Disney',
                { v: 1630, color: '#e5e4e2', annotation: 'All' },
                { v: 1170, color: '#e5e4e2', annotation: 'S' },
                { v: 460, color: '#e5e4e2', annotation: 'E' }]);

    data.addRow(['Skoda',
                { v: 1780, color: '#d5d5e2', annotation: 'All' },
                { v: 660, color: '#d5d5e2', annotation: 'S' },
                { v: 1120, color: '#d5d5e2', annotation: 'E' }]);

    data.addRow(['Yamma',
                { v: 1570, color: '#a80c1b', annotation: 'All' },
                { v: 1030, color: '#a80c1b', annotation: 'S' },
                { v: 540, color: '#a80c1b', annotation: 'E' }]);


    options = {
        legend: 'none'
    };

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

JSFiddle code

但是这不起作用...我该如何解决这个问题？

Answer 1

建议的更改...

1. 建议使用loader.js 加载库，而不是旧的jsapi
   根据release notes...

通过jsapi 加载程序仍然可用的 Google 图表版本不再持续更新。请从现在开始使用新的 gstatic 加载器。

这只会改变load 语句（见sn-p）

1. DataTable、data 和 dataTable 使用了两个变量
   从未创建过data，可能是拼写错误
   另外，创建DataTable时，需要使用new关键字

dataTable = new google.visualization.DataTable();

1. 最后，style 和 annotation 都应该有自己的列
   请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});


function drawChart() {
  var chart; var dataTable; var options;

  dataTable = new google.visualization.DataTable();

  dataTable.addColumn('string', 'Company');
  dataTable.addColumn({label: 'Total', type: 'number'});
  dataTable.addColumn({role: 'style', type: 'string'});
  dataTable.addColumn({role: 'annotation', type: 'string'});

  dataTable.addColumn({label: 'Sales', type: 'number'});
  dataTable.addColumn({role: 'style', type: 'string'});
  dataTable.addColumn({role: 'annotation', type: 'string'});

  dataTable.addColumn({label: 'Expenses', type: 'number'});
  dataTable.addColumn({role: 'style', type: 'string'});
  dataTable.addColumn({role: 'annotation', type: 'string'});

  dataTable.addRow(['Cristal',
    {v: 1400}, {v: '#b87333'}, {v: 'All'},
    {v: 1000}, {v: '#b87333'}, {v: 'S'},
    {v:  400}, {v: '#b87333'}, {v: 'E'}
  ]);

  dataTable.addRow(['Disney',
    {v: 1630}, {v: '#e5e4e2'}, {v: 'All'},
    {v: 1170}, {v: '#e5e4e2'}, {v: 'S'},
    {v:  460}, {v: '#e5e4e2'}, {v: 'E'}
  ]);

  dataTable.addRow(['Skoda',
    {v: 1780}, {v: '#d5d5e2'}, {v: 'All'},
    {v:  660}, {v: '#d5d5e2'}, {v: 'S'},
    {v: 1120}, {v: '#d5d5e2'}, {v: 'E'}
  ]);

  dataTable.addRow(['Yamma',
    {v: 1570}, {v: '#a80c1b'}, {v: 'All'},
    {v: 1030}, {v: '#a80c1b'}, {v: 'S'},
    {v:  540}, {v: '#a80c1b'}, {v: 'E'}
  ]);

  options = {
    legend: 'none'
  };

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

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