javascript - Google图表中的趋势线

我使用的是Google图表库，但无法绘制趋势线，可能是因为我将string用作hAxis，将number用作vAxis，直到现在我才发现，直到两个轴都为数字时才能绘制趋势线，但是我看过使用Date作为hAxis的示例，但是我认为那是因为这是可比较的。
那么我可以用xAxis作为String绘制一个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"

最佳答案

您可以使用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]
]);

您的轴值仍将是“ Tokyo”，“ Shinagawa”等，但它们将被计算为数字1、2等。

关于javascript - Google图表中的趋势线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19117388/