Google Chart：材料柱形图，最后一列有不同的颜色集，使用系列

Posted 2021-05-05

我是google图表的新手，所以如果这个问题对我来说太过于道歉，我会道歉

我有一个材料柱形图，每列有2个条形图，我希望最后一列的2个条形图有不同的颜色，我不希望在图例上看到这些颜色。我知道我应该使用系列，但我不知道如何构建它。

目前我所拥有的是：

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawchart);

function drawchart(){
var data = google.visualization.arrayToDataTable([

          ['Year', 'bar1', { role: 'annotation'}, 'bar2', { role: 'annotation'}],
          ['2015', 90, '90%', 69, '69%'],
          ['2016', 86, '86%', 96, '96%'],
          ['2017', 83, '83%', 87, '87%'],
          ['2018', 84, '84%', 78, '78%'],
          ['AVERAGE', 86, '86%', 82, '82%'],
        ]);

        var options = {
            height:500,
             vAxis: {
             gridlines: {count: 12},
               viewWindow: { max: 120, min: 0 } ,
               textStyle: { color: 'white' }
            },

      seriesType: 'bars' ,
       series: {4:{colors: ['green', 'yellow']}}, 
      legend: {position: 'bottom'},
       annotations: { 
        textStyle: { fontSize: 18, bold: true }
     }
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));
var formatter = new google.visualization.NumberFormat(
    {suffix:'%', fractionDigits: 0});
formatter.format(datasecond, 1); // Apply formatter to second column
formatter.format(datasecond, 3);
        chart.draw(datasecond, google.charts.Bar.convertOptions(options));
    }

click here to see the image of my goal output

提前致谢！

答案

您可以使用'style'列角色来更改单个条的颜色。 将样式添加到数据表，类似于注释， 对应该是默认样式的值使用null

var data = google.visualization.arrayToDataTable([
  ['Year', 'bar1', {role: 'annotation'}, {role: 'style'}, 'bar2', {role: 'annotation'}, {role: 'style'}],
  ['2015', 90, '90%', null, 69, '69%', null],
  ['2016', 86, '86%', null, 96, '96%', null],
  ['2017', 83, '83%', null, 87, '87%', null],
  ['2018', 84, '84%', null, 78, '78%', null],
  ['AVERAGE', 86, '86%', '#109618', 82, '82%', '#ff9900'],
]);

---

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'bar1', {role: 'annotation'}, {role: 'style'}, 'bar2', {role: 'annotation'}, {role: 'style'}],
    ['2015', 90, '90%', null, 69, '69%', null],
    ['2016', 86, '86%', null, 96, '96%', null],
    ['2017', 83, '83%', null, 87, '87%', null],
    ['2018', 84, '84%', null, 78, '78%', null],
    ['AVERAGE', 86, '86%', '#109618', 82, '82%', '#ff9900'],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 64,
      left: 64,
      right: 32,
      bottom: 48
    },
    height: '100%',
    width: '100%',
    vAxis: {
      gridlines: {count: 12},
      viewWindow: {max: 120, min: 0} ,
      textStyle: {color: 'white'}
    },
    seriesType: 'bars',
    legend: {position: 'bottom'},
    annotations: {
      textStyle: {fontSize: 18, bold: true}
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));
  var formatter = new google.visualization.NumberFormat({
    suffix:'%',
    fractionDigits: 0
  });
  formatter.format(data, 1);
  formatter.format(data, 3);
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

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

以上是关于Google Chart：材料柱形图，最后一列有不同的颜色集，使用系列的主要内容，如果未能解决你的问题，请参考以下文章

如果数据相对较小，Kendo 柱形图的 Bar 不显示 -- Kendo Angular Chart

谷歌柱形图仪表板

Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

如何在谷歌列图表中添加目标行？

Highcharts柱形图直方图在工具提示中显示x范围

fusioncharts弄柱形图，有两列，一列显示数值，一列显示百分数，要怎么弄？xml的形式