javascript - 更改 Google ComboChart 中的带颜色

Question

我在此处找到了我之前关于图表的问题的答案 fill background color horizontally in google line chart on specified area

现在我的问题是改变区域颜色

可以找到代码here (抱歉嵌入导致错误)

function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'color band 1');
data.addColumn('number', 'color band 2');
data.addColumn('number', 'color band 3');
data.addColumn('number', 'color band 4');
data.addColumn('number', 'color band 5');

var y = 50;
// fill with 100 rows of random data
for (var i = 0; i < 100; i++) {
    y += Math.ceil(Math.random() * 5) * Math.pow(-1, Math.ceil(Math.random() * 2));
    if (y < 0) {
        y = 10;
    }
    if (y > 100) {
        y = 90;
    }
    // make the colored bands appear every 20
    data.addRow([i, y, 20, 20, 20, 20, 20]);
}

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

chart.draw(data, {
    height: 400,
    width: 600,
    isStacked: true,
    vAxis: {
        minValue: 0,
        maxValue: 100
    },
    series: {
        0: {
            type: 'line'
        },
        1: {
            lineWidth: 0,
            type: 'area',
            visibleInLegend: false,
            enableInteractivity: false
        },
        2: {
            lineWidth: 0,
            type: 'area',
            visibleInLegend: false,
            enableInteractivity: false
        },
        3: {
            lineWidth: 0,
            type: 'area',
            visibleInLegend: false,
            enableInteractivity: false
        },
        4: {
            lineWidth: 0,
            type: 'area',
            visibleInLegend: false,
            enableInteractivity: false
        },
        5: {
            lineWidth: 0,
            type: 'area',
            visibleInLegend: false,
            enableInteractivity: false
        },
        6: {
            lineWidth: 0,
            type: 'area',
            visibleInLegend: false,
            enableInteractivity: false
        }
    }
});

Answer 1

在每个系列中使用color选项...

1: {
    color: '#f44336',  // <-- add color option
    lineWidth: 0,
    type: 'area',
    visibleInLegend: false,
    enableInteractivity: false
},
2: {
    color: '#2196f3',  // <-- add color option
    lineWidth: 0,
    type: 'area',
    visibleInLegend: false,
    enableInteractivity: false
},
...

区域系列默认不透明
要查看真实颜色，请设置 --> areaOpacity: 1

1: {
    areaOpacity: 1,
    color: '#000000',
    lineWidth: 0,
    type: 'area',
    visibleInLegend: false,
    enableInteractivity: false
},