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

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

经典 - ＆gt; packages: ['corechart'] + google.visualization.ColumnChart

材料 - ＆gt; packages: ['bar'] + google.charts.Bar

当涉及到样式的可用选项时，

材料图表是有限的请参阅材料无法使用的选项 - ＆gt; Tracking Issue for Material Chart Feature Parity

可以选择设置类似于材料的经典图表

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>

谷歌可视化图表 - 颜色

1 个答案: