javascript - Google AreaChart 不同的颜色

Question

我有这样的图表

google.charts.load('current', {
    packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Data');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addRows([
        [
            '01.06',
            null,
            0,
            null,
            null
        ],
        [
            '01.07',
            null,
            49,
            null,
            null
        ],
        [
            '01.08',
            null,
            14,
            null,
            null
        ],
        [
            '01.09',
            null,
            13,
            null,
            null
        ],
        [
            '01.10',
            10,
            null,
            null,
            null
        ],
        [
            '01.11',
            null,
            28,
            null,
            null
        ],
        [
            '01.12',
            null,
            24,
            null,
            null
        ],
        [
            '01.13',
            null,
            22,
            null,
            null
        ],
        [
            '01.14',
            null,
            19,
            null,
            null
        ],
        [
            '01.15',
            null,
            17,
            null,
            null
        ],
        [
            '01.16',
            null,
            15,
            null,
            null
        ],
        [
            '01.17',
            10,
            null,
            null,
            null
        ],
        [
            '01.18',
            null,
            33,
            null,
            null
        ],
        [
            '01.19',
            null,
            29,
            null,
            null
        ],
        [
            '01.20',
            null,
            null,
            null,
            37
        ],
    ]);

    var options = {
        legend: 'none',
        pointSize: 5,
        series: {
            0: {
                color: '#058DC7'
            },
            1: {
                color: 'red'
            },
            2: {
                color: 'green'
            },
            3: {
                color: 'orange'
            }
        }
    };

    // Instantiate and draw the chart.
    var chart = new google.visualization.AreaChart(document.getElementById('myPieChart'));
    chart.draw(data, options);
}

https://jsfiddle.net/bvtzm2td/2/

我需要这样的图表

我正在尝试这样做

google.charts.load('current', {
    packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Data');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addColumn('number', 'A');
    data.addRows([
        [
            '01.06',
            0,
            0,
            null,
            null
        ],
        [
            '01.07',
            null,
            49,
            null,
            null
        ],
        [
            '01.08',
            null,
            14,
            null,
            null
        ],
        [
            '01.09',
            null,
            13,
            null,
            null
        ],
        [
            '01.10',
            10,
            10,
            null,
            null
        ],
        [
            '01.11',
            28,
            28,
            null,
            null
        ],
        [
            '01.12',
            null,
            24,
            null,
            null
        ],
        [
            '01.13',
            null,
            22,
            null,
            null
        ],
        [
            '01.14',
            null,
            19,
            null,
            null
        ],
        [
            '01.15',
            null,
            17,
            null,
            null
        ],
        [
            '01.16',
            null,
            15,
            null,
            null
        ],
        [
            '01.17',
            10,
            10,
            null,
            null
        ],
        [
            '01.18',
            33,
            33,
            null,
            null
        ],
        [
            '01.19',
            null,
            29,
            null,
            null
        ],
        [
            '01.20',
            null,
            37,
            null,
            37
        ],
    ]);

    var options = {
        legend: 'none',
        pointSize: 5,
        series: {
            0: {
                color: '#058DC7'
            },
            1: {
                color: 'red'
            },
            2: {
                color: 'green'
            },
            3: {
                color: 'orange'
            }
        }
    };

    // Instantiate and draw the chart.
    var chart = new google.visualization.AreaChart(document.getElementById('myPieChart'));
    chart.draw(data, options);
}

https://jsfiddle.net/bvtzm2td/3/

但是效果不好，看起来像这样问题是 google api 自动连接 01.10 和 01.11 以及 01.17 和 01.18< 之间的红点/strong>，但这不是必需的。

任何帮助将不胜感激

Answer 1

在您的示例中，您正在创建包含多个系列的图表，其中每个系列具有不同的颜色。当有多个系列时，只有同一系列中的相邻点才会用一条线链接。

根据您对期望结果的描述，我建议创建一个包含单个系列的图表，其中每个点都有不同的颜色。

<head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
    google.charts.load('current', {
        packages: ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        // Define the chart to be drawn.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Data');
        data.addColumn('number', 'A');
        data.addColumn({type: 'string', role: 'style'});
        data.addRows([
            [
                '01.06',
                0,
                'color: red'
            ],
            [
                '01.07',
                49,
                'color: red'
            ],
            [
                '01.08',
                14,
                'color: red'
            ],
            [
                '01.09',
                13,
                'color: red'
            ],
            [
                '01.10',
                10,
                'color: #058DC7'
            ],
            [
                '01.11',
                28,
                'color: red'
            ],
            [
                '01.12',
                24,
                'color: red'
            ],
            [
                '01.13',
                22,
                'color: red'
            ],
            [
                '01.14',
                19,
                'color: red'
            ],
            [
                '01.15',
                17,
                'color: #058DC7'
            ],
            [
                '01.16',
                15,
                'color: red'
            ],
            [
                '01.17',
                10,
                'color: red'
            ],
            [
                '01.18',
                33,
                'color: red'
            ],
            [
                '01.19',
                29,
                'color: red'
            ],
            [
                '01.20',
                37,
                'color: orange'
            ],
        ]);

        var options = {
            legend: 'none',
            pointSize: 5,
            series: {
                0: {
                },
            }
        };

        // Instantiate and draw the chart.
        var chart = new google.visualization.AreaChart(document.getElementById('myPieChart'));
        chart.draw(data, options);
    }
  </script>
</head>
<body>
<!-- Identify where the chart should be drawn. -->
<div id="myPieChart"/>
</body>

请注意，点颜色用于点之前的线/区域，与您最初要求的略有不同。