google-visualization - 更改堆叠分组 Google 柱形图的颜色

Question

请看http://jsfiddle.net/v1u1afzn/228/

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

function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      0: {
      },
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
    },
    colors: ['blue', 'red'],
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
};

如何将褪色/浅蓝色(第一列顶部堆栈)更改为黄色？

我找不到改变分组的单个系列颜色的方法。

有什么想法吗？

提前致谢。

Answer 1

使用 series 选项更改单个系列/列/堆栈的颜色

series: {
  0: {
    color: 'yellow'
  },
  1: {
    color: 'green'
  },
  2: {
    color: 'blue',
    targetAxisIndex: 1
  },
  3: {
    color: 'red',
    targetAxisIndex: 1
  }
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 321, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 123, 578],
    ['2004', 197, 536, 613, 298]
  ]);

  var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      0: {
        color: 'yellow'
      },
      1: {
        color: 'green'
      },
      2: {
        color: 'blue',
        targetAxisIndex: 1
      },
      3: {
        color: 'red',
        targetAxisIndex: 1
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

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

注意 jsapi 不应再用于加载图表库，
根据发行说明...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

这只会改变 load 语句，见上面的片段......