Question

我需要在谷歌折线图中添加多条趋势线，但我无法弄清楚如何使用多条线进行操作。

这是我的代码示例，其中包含一条基于日期和值的单行来构建图表：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        function drawMultipleTrendlineChart() {

            var chart;

            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Date');
            data.addColumn('number', 'Sales value');

            data.addRow([new Date(2013, 3, 11), 10]);
            data.addRow([new Date(2013, 4, 02), 650]);
            data.addRow([new Date(2013, 5, 03), 55]);
            data.addRow([new Date(2013, 6, 04), 95]);
            data.addRow([new Date(2013, 7, 05), 400]);
            data.addRow([new Date(2013, 8, 06), 600]);
            data.addRow([new Date(2014, 0, 07), 800]);
            data.addRow([new Date(2014, 1, 08), 900]);
            data.addRow([new Date(2014, 2, 09), 3127]);

            var formatter = new google.visualization.NumberFormat({
                fractionDigits: 2,
                prefix: 'R$:'
            });
            formatter.format(data, 1);
            var dateFormatter = new google.visualization.NumberFormat({
                pattern: 'MMM yyyy'
            });
            dateFormatter.format(data, 0);
            var chartHeight = 400;
            var chartWidth = 600;
            var chartOptions = {
                tooltip:{isHtml: true},     
                trendlines: {
                    0: {color: 'red'}
                },
                title: 'Trendlines with multiple lines',
                isStacked: true,
                width: chartWidth,
                height: chartHeight,
                colors: ['#0000D8'],
                hAxis: {
                    title: 'example title',
                    slantedText: false,
                    slantedTextAngle: 45,
                    textStyle: {
                        fontSize: 10
                    },
                    format: 'dd-MM-yyyy'
                },
                chartArea: {
                    left: 100,
                    top: 20,
                    width: (chartWidth - 10),
                    height: (chartHeight - 90)
                }
            };
            chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
            chart.draw(data, chartOptions);
        }
        google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});

    </script>
</head>
<body>
    <div id="multipleTrendChart"></div>
</body>

我不想这样做：Image_example

jsfiddle示例：http://jsfiddle.net/w3ez9gwb/

Answer 1

只需添加更多数据列：

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');

data.addRows([
    [new Date(2013, 3, 11),  100,  10],
    [new Date(2013, 4, 02),   50,  650],
    [new Date(2013, 5, 03),   70,  55],
    [new Date(2013, 6, 04),   80,  95],
    [new Date(2013, 7, 05),   50,  400],
    [new Date(2013, 8, 06),   10,  600],
    [new Date(2014, 0, 07),   20,  800],
    [new Date(2014, 1, 08),  300,  900],
    [new Date(2014, 2, 09),  100,  312]
  ]);

然后将趋势线添加到图表选项中，如下所示：

var chartOptions = {
    tooltip: {
        isHtml: true
    },
    trendlines: {
        0: {
            color: 'red'
        },
        1: {
            color: 'yellow'
        },
    },

    ...

};

完整示例：JSFiddle

Google Charts中的多个趋势线

1 个答案: