Google 可视化图表区域背景

Question

我在y轴值之间的背景颜色有问题。我想在不同的值之间使用不同的背景颜色。

    google.load("visualization", "1", { packages: ['corechart', 'line'] });
    var abChartCtrl = angular.module('abChartCtrl', []);
    abChartCtrl.controller('abctrl', ['$scope', function ($scope) {
    var data = new google.visualization.DataTable();
    data.addColumn('number', '');
    data.addColumn('number', '');

data.addRows([
    [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
    [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80], [69, 70], [79, 60]
]);
var options = {
    width: '100%',
    height: '100%',
    chartArea: {
        width: '90%',
        height: '80%',
        backgroundColor: '#E4E4E4',
    },
    legend: {
        position: 'none'
    }
};

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

chart.draw(data, options);}]);

我的图表看起来是这样的：

我希望得到像这样的效果：

- mrkibzk

---

请查看此答案：https://dev59.com/Mpvga4cB1Zd3GeqPvwpG#39671447 - WhiteHat

感谢 @WhiteHat 的回答。 - mrkibzk

Answer 1

这是答案

var dataTable = new google.visualization.DataTable({
            cols: [
                { label: 'Time', type: 'number' },
                { label: 'Low', type: 'number' },
                { label: 'LowAvg', type: 'number' },
                { label: 'Avg', type: 'number' },
                { label: 'AvgHigh', type: 'number' },
                { label: 'High', type: 'number' },
                { label: 'Test', type: 'number' }
            ],
            rows: [
                { c: [{ v: 0 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 0 }] },
                { c: [{ v: 5 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 24 }] },
                { c: [{ v: 10 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 20 }] },
                { c: [{ v: 15 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 48 }] },
                { c: [{ v: 20 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 53 }] },
                { c: [{ v: 25 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 81 }] },
                { c: [{ v: 30 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 33 }] },
                { c: [{ v: 40 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 66 }] },
                { c: [{ v: 45 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 50 }] },
                { c: [{ v: 50 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 75 }] },
                { c: [{ v: 55 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 38 }] },
                { c: [{ v: 60 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 40 }] },
                { c: [{ v: 65 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 65 }] },
                { c: [{ v: 70 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 80 }] },
                { c: [{ v: 80 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 45 }] }
            ]
        });

        var options = {
            width: '100%',
            height: '100%',
            chartArea: {
                width: '90%',
                height: '80%',
            },
            legend: {
                position: 'none'
            },
            /* hAxis: {
                ticks: [0, 15, 30, 45, 60],
            }, */
            isStacked: true,
            series: {
                // Low
                0: {
                    areaOpacity: 0.6,
                    color: '#959595',
                    visibleInLegend: false
                },

                // LowAvg
                1: {
                    areaOpacity: 0.6,
                    color: '#00BFF3',
                    visibleInLegend: false
                },

                // Avg
                2: {
                    areaOpacity: 0.6,
                    color: '#3AB54A',
                    visibleInLegend: false
                },
                3: {
                    areaOpacity: 0.6,
                    color: '#FEF568',
                    visibleInLegend: false
                },

                // High
                4: {
                    areaOpacity: 0.6,
                    color: '#ED1B24',
                    visibleInLegend: false
                },

                // Test - color of chart
                5: {
                    color: '#01579B',
                    type: 'line'
                }
            },
            seriesType: 'area',
            vAxis: {
                ti1cks: [0, 25, 50, 75, 100]
            }
        };

- mrkibzk