谷歌图表中的多个趋势线

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

这是我基于日期和值单行代码示例建立图表：

<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>

我wan't做这样的形象：Image_example

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

来源

2015-05-07 Ricardo Brancaglion

只需添加更多列的数据：

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

来源

2015-05-07 14:38:13 dekkard

我wan't多行，但是每行一个趋势线，就像形象示人，我有他们在不同的颜色，每个都有自己的趋势线。 –

更新了答案和完整的示例JSFiddle – dekkard

谷歌图表中的多个趋势线

回答

相关问题