谷歌圖表中的趨勢線

Question

我正在使用谷歌圖表庫，但無法繪製趨勢線可能是因爲我使用string作爲hAxis和number作爲vAxis，直到現在我發現它是不可能繪製趨勢線直到兩軸是數字，但我已經看到例如日期作爲hAxis使用，但我認爲這是因爲這是可比的。
所以我可以用xAxis作爲字符串繪製trendLine嗎？

我的代碼：

<script type="text/javascript"> 
    google.load('visualization', '1.1', {'packages': ['corechart'], 'callback': drawChart}); 

    function drawChart() { 
    var data = new google.visualization.DataTable(); 
     <g:each status="counter" var="row" in="${transactionsColumns}"> 
     data.addColumn("${row[0]}","${row[1]}"); 
     </g:each> 
     var tempData=new Array(); 
     <g:each status="counter" var="row" in="${transactionsData}"> 
     var lowerArray=new Array(); 
     <g:each status="eIndex" var="element" in="${row}"> 

     <g:if test="${eIndex==0}"> 
     var column="${row[eIndex]}" 
     lowerArray[${eIndex}]=column; 
     </g:if> 
     <g:else> 
     var column=${row[eIndex]} 
     lowerArray[${eIndex}]=column; 
     </g:else> 

     </g:each> 
     tempData[${counter}]=lowerArray; 
     </g:each> 
    data.addRows(tempData); 


    var options = {'title':"${transactionsColumns[1][1]}", 
      'width':'auto', 
      'height':'auto', 

      trendlines: { 
       0: { 
       visibleInLegend: true, 
       color: 'purple', 
       lineWidth: 10, 
       opacity: 0.2, 
       } 
      } 
      }; 

    var chart = new google.visualization.LineChart(document.getElementById("lineChart${divId}")); 
    chart.draw(data, options); 
    } 
    </script> 

編輯： JMAC幫助後，我能夠做到這一點：

現在我得到了我想要的徘徊在圖點，但不在X軸本身，它仍然顯示編號
我的代碼：這是一個單元格

lowerArray[${eIndex}]= {v:${counter+1},f:column}; //LHS dont care about it. v:loop_var(1,2,3..),f:"MyString" 

Answer 1

您可以使用kludge來解決此問題。

Google支持單獨計算和顯示數值。您可以給數據賦予任意數值，並將其顯示爲一個字符串，從而允許您創建趨勢線。

舉例來說，如果你有以下數據集：

data.addColumn('string','Stations'); 
data.addColumn('number','Bentos Sold'); 
data.addRows([ 
    ['Tokyo',1], 
    ['Shinagawa',2], 
    ['Yokohama',3], 
    ['Nagoya',4], 
    ['Osaka',5] 
]); 

如下，您可以改變這種使用{v: , f:}格式：

data.addColumn('number','Stations'); 
data.addColumn('number','Bentos Sold'); 
data.addRows([ 
    [{v:1, 'Tokyo'},1], 
    [{v:2, 'Shinagawa'},2], 
    [{v:3, 'Yokohama'},3], 
    [{v:4, 'Nagoya'},4], 
    [{v:5, 'Osaka'},5] 
]); 

你軸上的值仍然是「東京」，「品川'等，但他們會計算爲數字1，2等

Answer 2

function drawMultipleTrendlineChart() { 
    var chartType='columnChart'; 
    var collection = []; 
    var chart = { 
    "collection":[{ 
    "0": ["date", "Data"], 
    "1": ["number", "Valor 1"], 
    "2": ["number", "Valor 2"], 
    "3": ["number", "Valor 3"], 
    "4": ["number", "Valor 4"],  
}, 
    { 
    "0": ['2013-3-2', 200, 1000], 
    "1": ['2013-4-2', 500, 650], 
    "2": ['2013-5-2', 700, 550], 
    "3": ['2013-6-2', 300, 95], 
    "4": ['2013-8-2', 200, 75], 
    "5": ['2013-9-2', 900, 1275], 
    "6": ['2013-10-2', 900, 1275], 
}] 
}; 


    var data = new google.visualization.DataTable(); 
      var valores = []; 
      for(var h=0; h <= chart.collection[0][0].length; h++){ 
       data.addColumn(chart.collection[0][h][0], 
       chart.collection[0][h][1]); 
      } 
      var total = chart.collection[1][0].length; 
      var params = []; 

      for(var i=0; i<= total; i++){ 

        var dataString = chart.collection[1][i][0]; 
        var dataVenda = dataString.split('-'); 
        var ano = eval(dataVenda[0]); 
        var mes = eval(dataVenda[1]); 
        var dia = eval(dataVenda[2]); 
        valores[i] = [new Date(ano, mes, dia), 
            chart.collection[1][i][1], 
            chart.collection[1][i][2]]; 

params[i] = '"'+i+'":{"showR2": false, "labelInLegend": \'valores\', "type": "exponencial", "visibleInLegend": true}'; 

      } 
var parseData = eval('var dataParse = {'+params.join(',')+'}'); 
      data.addRows(valores); 
      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 
       }, 
       title: chart.title, 
       isStacked: true, 
       width: chartWidth, 
       height: chartHeight, 
       //colors: ['#0000D8', '#00dddd'], 
       hAxis: { 
        title: 'Vendas por distribuidor', 
        slantedText: false, 
        slantedTextAngle: 45, 
        textStyle: { 
         fontSize: 10 
        }, 
        format: 'dd-MM-yyyy' 
       }, 
       chartArea: { 
        left: 50, 
        top: 20, 
        width: (chartWidth - 10), 
        height: (chartHeight - 90) 
       } 
      }; 
      chartOptions.trendlines = dataParse; 
      chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart')); 
      chart.draw(data, chartOptions); 
     } 

google.load('visualization', '1', { 
    packages: ['corechart'], 
    callback: drawMultipleTrendlineChart 
});