谷歌图表vAxis勾选多种颜色和相应的浅色背景

时间:2017-07-06 05:49:55

标签: javascript jquery css charts google-visualization

这是我的谷歌图表代码vAxis勾选多种颜色

var gridlines = [
    '#ff0000',
    '#00ff00',
    '#0000ff'
];

var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
    var gridlineIndex = 0;
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect, index) {
    if (rect.getAttribute('height') === '1') {
        rect.setAttribute('fill', gridlines[gridlineIndex]);
        gridlineIndex++;
    }
});

chart.draw(data, options);

结果如何 enter image description here

但我希望像enter image description here

如何做以上,在刻度线下使用不同的背景颜色。 请支持我。

提前致谢

1 个答案:

答案 0 :(得分:3)

If you to do want to do like this

我使用Google图书馆组合表中的stepped area图表来完成此操作... 每个阶梯区域的值都是刻度的值。

这是jsfiddle code

的链接