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

建议更改...

建议使用loader.js加载库，而不是旧的jsapi 根据{{3}} ......

通过jsapi加载程序保留的Google图表版本不再一致更新。从现在开始请使用新的gstatic装载机。

这只会更改load语句（请参阅代码段）

两个变量用于DataTable，data和dataTable
永远不会创建data，可能是一个错字号另外，在创建DataTable时，需要使用new关键字

dataTable = new google.visualization.DataTable();

最后，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>

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

1 个答案: