javascript - Barchart/Columnchart - 同一系列中相同颜色的条形图

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

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

这只会改变 load 语句(见片段)

1. 两个变量用于DataTable，data 和dataTable
data 从未创建，可能是错字
   另外，在创建DataTable时，需要使用new关键字

dataTable = new google.visualization.DataTable();

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

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>