Google可视化图表-颜色

Question

我正在做的项目，我必须把不同的颜色在图表上，之间的一些区域的。我想在蓝色，红色，黄色，绿色

这就是我的结果

​

我想要这样的东西

​

这是我的代码

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

function drawStuff() {
    var data = google.visualization.arrayToDataTable([
        ['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
        ['W45', 10, 24, 20, 32, 18],
        ['W46', 16, 22, 23, 30, 16],
        ['W47', 28, 19, 29, 30, 12],
        ['W48', 26, 25, 23, 10, 16],
        ['W49', 28, 19, 29, 40, 12],
        ['W50', 16, 22, 23, 30, 16],
        ['W60', 28, 19, 29, 30, 12],
        ['W61', 26, 25, 23, 10, 16],
        ['W62', 28, 19, 29, 40, 12],
        ['W63', 16, 22, 23, 30, 16],
        ['W64', 28, 19, 29, 30, 12],
        ['W65', 26, 25, 23, 10, 16],
        ['W66', 28, 19, 29, 40, 12],
        ['W67', 28, 19, 29, 30, 12],
        ['W68', 26, 25, 23, 10, 16],
        ['W69', 28, 19, 29, 40, 12],
        ['W70', 16, 22, 23, 30, 16],
        ['W71', 28, 19, 29, 30, 12],
        ['W72', 26, 25, 23, 10, 16],
        ['W73', 28, 19, 29, 40, 12]
    ]);

    var options = {
        width: '100%',
        height: '100%',
        chartArea: {
            width: '90%',
            height: '80%',
        },
        bar: { groupWidth: '75%' },
        isStacked: true
    };

    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));

Answer 1

使用经典图表，而不是材料图表

经典--> packages: ['corechart'] + google.visualization.ColumnChart

material --> packages: ['bar'] + google.charts.Bar

当涉及到样式的可用选项时，材料图表是有限的

有关不可用于material --> Tracking Issue for Material Chart Feature Parity的选项，请参阅

有一个选项可以设置类似于material的经典图表样式

theme: 'material'

请看下面的工作片段...

​

google.charts.load('current', {
  callback: drawStuff,
  packages: ['corechart']
});

function drawStuff() {
  var data = google.visualization.arrayToDataTable([
      ['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
      ['W45', 10, 24, 20, 32, 18],
      ['W46', 16, 22, 23, 30, 16],
      ['W47', 28, 19, 29, 30, 12],
      ['W48', 26, 25, 23, 10, 16],
      ['W49', 28, 19, 29, 40, 12],
      ['W50', 16, 22, 23, 30, 16],
      ['W60', 28, 19, 29, 30, 12],
      ['W61', 26, 25, 23, 10, 16],
      ['W62', 28, 19, 29, 40, 12],
      ['W63', 16, 22, 23, 30, 16],
      ['W64', 28, 19, 29, 30, 12],
      ['W65', 26, 25, 23, 10, 16],
      ['W66', 28, 19, 29, 40, 12],
      ['W67', 28, 19, 29, 30, 12],
      ['W68', 26, 25, 23, 10, 16],
      ['W69', 28, 19, 29, 40, 12],
      ['W70', 16, 22, 23, 30, 16],
      ['W71', 28, 19, 29, 30, 12],
      ['W72', 26, 25, 23, 10, 16],
      ['W73', 28, 19, 29, 40, 12]
  ]);

  var options = {
      width: '100%',
      height: '100%',
      chartArea: {
          width: '90%',
          height: '80%',
          top: 48
      },
      bar: { groupWidth: '75%' },
      isStacked: true,
      theme: 'material',
      legend: {
          maxLines: 2,
          position: 'top'
      }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'));
  chart.draw(data, options);
}

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

​