如何从谷歌图表动态生成图表

时间:2011-11-16 08:57:43

标签: javascript jquery google-visualization

我正在尝试从以下链接实现图表 http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

以下是从phtml文件中获取的一段代码,

$ sale有阵列,

Array
(
    [0] => 19.92
    [1] => 159.15
    [2] => 374.96
    [3] => 319.5
    [4] => 237
)

$ month有数组,

Array
(
    [0] => 7
    [1] => 8
    [2] => 9
    [3] => 10
    [4] => 11
)

下面的脚本将根据数组值生成图表

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        var sale_arr = <?php echo json_encode($sale); ?>;
        var month_arr = <?php echo json_encode($months); ?>;
        alert(month_arr)
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Sales');
        //data.addColumn('number', 'Expenses');
        var result = '';
         for(var i=0; i<month_arr.length; i++) {
          result += '["'+month_arr[i]+'",' +sale_arr[i]+'],';
         }     
        alert(result);  
        data.addRows([
          result
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Order',
                          hAxis: {title: 'Year', titleTextStyle: {color: '#FF0000'}}
                         });
      }
    </script>

我需要形成像

这样的值
data.addRows([
  ['4', 1000,
  ['5', 1170],
  ['6', 660],
  ['7', 1030]
]);
我的脚本result中的

将生成["7",19.92],["8",159.15],["9",374.96],["10",319.5],["11",237],。我也将结果添加为

    data.addRows([
      result
    ]);

这会在脚本上产生一些错误。我做错了这段代码。请帮助我。

2 个答案:

答案 0 :(得分:1)

你的var结果给你一个额外的逗号,告诉代码当真的没有

时还有另一个值
var result = '';
for(var i=0; i<month_arr.length; i++) {
    result += '["'+month_arr[i]+'",' +sale_arr[i]+'],';
}     
result = result.substring(0, result.length - 1)
alert(result); 

答案 1 :(得分:0)

我认为AddRows函数的给定参数应该是一个数组,而不是字符串。

此外,您应该删除最后一个逗号,以便拥有一个可以解释为数组的字符串。

data.addRows(
      eval('[' + result.substring(0, result.length - 1) + ']')
    )

但使用eval并不是最好的方法。在创建result数据时,可以创建数组而不是字符串。代码如下:

var result = [];

for(var i=0; i<month_arr.length; i++) {
    result.push( [month_arr[i], sale_arr[i]] );
}    

data.addRows(result);