Question

我正在使用谷歌图表库，但无法绘制趋势线可能是因为我使用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帮助之后，我能够做到这一点：
Graph with string x-axis but actual a number

现在我得到了我想要的图形点悬停，但不是在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
});

谷歌排行榜的趋势线

2 个答案: