Google 可视化 API - 多折线图答案

【问题标题】：Google Visualization API - Multi-Line ChartGoogle 可视化 API - 多折线图
【发布时间】：2013-03-21 13:40:50
【问题描述】：

我在从数据库中提取记录后创建了一个数组。数组是这样的：

// $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

$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

<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'] 数组的位置尝试了各种排列和组合，但我似乎无法在单个图中绘制两条线。我可能弄乱了数组的位置。

我设法得到的最接近的是如下所示：

但我的预期输出类似于

f30 和 f31 代替 Sales 和 Expenses 和 October、November 和 December 代替 2004、2005、@9876543 2007

【问题讨论】：

您想要一个包含 3 列的表格：A 列包含日期（日期格式，例如 new Date(2012,9,1)，因此它们的顺序正确）。您可以按原样使用字符串，但需要注意顺序。 B 列具有 F30 的值。 C 列包含 F31 的值。操纵你的数据最终以这种方式结束，它会起作用。我不确定您是如何将数组获取到数据表中的，因此除非您分享您如何将其实际传递给谷歌图表 API，否则我无法更具体。
这就是问题@jmac 我似乎不知道如何从数组中制作 3 列。
你是如何创建数组的？您从数据库中获取的数据是什么？你真的没有办法把数据换成不同的格式吗？您可以在数组中创建一个数组，然后循环遍历每个数据点的子数组（例如，您将拥有 2012 年 11 月，然后是 [70, 83]）。但是目前提供的信息没有办法给出具体的解决方案（它太宽泛了，你不能清楚地知道哪些事情可以/不能改变）
好的。让我们忘记数据库。假设我已经硬编码了 $xyz 数组包含的值。需要什么形式转换$xyz来绘制多折线图？我已经浏览了Google Code Playground，但它不包含使用 PHP 数组的示例。
@jmac 不用担心。我想到了。不过感谢您的宝贵时间

标签： php google-visualization linechart

【解决方案1】：

我自己想通了。天哪！这是何等的解脱。我只需要有一个这种格式的数组：

Array
(
    [December 2012] => Array
        (
            [0] => 71
            [1] => 85
        )

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

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

)

剩下的是对foreach 循环的小修改，瞧！搞定了。

【讨论】：

【解决方案2】：

您还可以为每个 f[30] 和 f[31] 创建一个数据表然后做 google.visualization.data.join()

这基本上将两个图表从关键列连接起来 - 即

【讨论】：