首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Google Visualization API -多线图

Google Visualization API -多线图
EN

Stack Overflow用户
提问于 2013-03-21 21:40:51
回答 2查看 5.6K关注 0票数 2

我有一个在从数据库中拉出记录后创建的数组。该数组类似于:

代码语言:javascript
复制
// $xyz array
Array
(
    [f30] => Array
        (
            [December 2012] => 71
            [November 2012] => 70
            [October 2012] => 66
        )    

    [f32] => Array
        (
            [December 2012] => 85
            [November 2012] => 83
            [October 2012] => 81
        )
)

如果它是一个单线图,我可以毫不费力地画出来。然而,当我尝试绘制多线图时,我遇到了很多问题。下面是我尝试用来绘制数据的代码:

PHP

代码语言:javascript
复制
$table = array();
$table['cols'] = array(
           array('label' => 'Month', 'type' => 'string')        
         );

$rows = array();
foreach($xyz as $form=>$hhh)
{        
   $table['cols'][] = array('label'=>$form, 'type'=>'number');
   foreach($hhh as $mnth=>$pt)
   {
      $temp = array();
      $temp[] = array('v' => (string) $mnth);
      $temp[] = array('v' => (int) $pt);
      $rows[] = array('c'=>$temp);
    }
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);

JS

代码语言:javascript
复制
<script type="text/javascript">

    google.load('visualization', '1', {'packages':['corechart']});    
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: 'Some title',
          is3D: 'true',
          width: 800,
          height: 600
        };            
      var chart = new google.visualization.LineChart(document.getElementById('divID'));
      chart.draw(data, options);
    }
    </script>

我尝试过通过改变$temp$rows$table['rows']数组的位置来进行各种排列和组合,但是我似乎不能在一个图中绘制两条线。我可能把数组的位置搞乱了。

我设法得到的最接近的结果如下所示:

但是我的预期输出是这样的

f30f31 go代替SalesExpensesOctoberNovemberDecember go代替20042005、<代码>D17、2007

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-03-23 16:35:02

我自己想出来的。天哪!这真是一种解脱。我只需要有一个这种格式的数组:

代码语言:javascript
复制
Array
(
    [December 2012] => Array
        (
            [0] => 71
            [1] => 85
        )

    [November 2012] => Array
        (
            [0] => 70
            [1] => 83                
        )

    [October 2012] => Array
        (
            [0] => 66
            [1] => 81
        )

)

剩下的只是foreach循环中的一个小修改,瞧!它已经完成了。

票数 2
EN

Stack Overflow用户

发布于 2013-04-12 17:29:58

您还可以为每个f30和f31创建一个数据表,然后执行google.visualization.data.join()

这基本上连接了关键列之外的两个图表-即

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15549201

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档