javascript - 谷歌图表中的趋势线

Question

我正在使用谷歌图表库但无法绘制趋势线可能是因为我使用 string 作为 hAxis 和 number 作为 vAxis，到目前为止我发现的是在两个轴都是数字之前不可能绘制趋势线，但我已经看到使用 Date 作为 hAxis 的示例，但我认为那是因为它具有可比性。
那么我可以用 xAxis 作为 String 绘制趋势线吗？

我的代码:

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