【问题标题】:Generate a highchart based on the output of an array根据数组的输出生成高图
【发布时间】:2012-03-24 13:39:52
【问题描述】:

更新我已更新我的代码以响应@MichaelRushton cmets。我现在正在使用 Highcharts,但无法将输出输出到数据系列。

我现在从 mysql 查询中生成了以下数组,我想将其输出到折线图中。我的 Y 轴应该包含金额,x 轴是日期范围,图例是图表上绘制的不同项目。

   // Call the stored procedure
   $stmt->execute();                    

   while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
       $array[$row['legend']][$row['date']] = $row['amount'];
       //print_r($array);
   }


   chart = new Highcharts.Chart({

   chart: {
     renderTo: 'container',
     type: 'line'
   },

   xAxis:
   {
    categories: [2012-03-01, 2012-03-02, 2012-03-03, 2012-03-04, 2012-03-05, 2012-03-06, 2012-03-07, 2012-03-08, 2012-03-09, 2012-03-10, 2012-03-11, 2012-03-12, 2012-03-13, 2012-03-14, 2012-03-15, 2012-03-16, 2012-03-17, 2012-03-18, 2012-03-19, 2012-03-20, 2012-03-21, 2012-03-22, 2012-03-23, 2012-03-24, 2012-03-25, 2012-03-26, 2012-03-27, 2012-03-28, 2012-03-29, 2012-03-30, 2012-03-31],
   },

   series:
   [

<?php
     foreach ($array as $legend => $data)
         {
           echo '{';
           echo "name: '" . $legend . "',";

           $values = array();

           for ($i = 1; $i <= 31; ++$i)
           {
             $values[] = isset($data[$i]) ? $data[$i] : 0;
           }

           echo 'data: [' . implode(', ', $values) . '],';
           echo '},';

         }
?>
],
 }
 );

<div id="container" style="width: 100%; height: 400px"></div>
) 

这段代码向我展示了以下输出:

series: [ {name: 'Something Tastier',data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],},{name: 'Something Tasty',data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],}, ], } );

除了没有输出到数据系列的值外,这似乎是正确的。如果有人有任何进一步的想法,将不胜感激。

【问题讨论】:

    标签: php mysql charts highcharts


    【解决方案1】:

    Highcharts 是我最喜欢的图表选项。可能值得将您的数组构造成如下所示:

    Array (
    
      [legend_one] => Array
      (
    
        [2012-03-01] => 100
        [2012-03-02] => 200
        [2012-03-03] => 300
        ...
    
      )
    
      [legend_two] => Array
      (
    
        // Day of the month    
        [2012-03-01] => 100
        [2012-03-02] => 200
        [2012-03-03] => 300
        ...
    
      )
    
      ...
    
    )
    

    然后您可以像这样使用 Highcharts:

    编辑:现在使用完整日期而不仅仅是日,使月份动态化(使用 $start 变量),并从 0 而不是 1 开始日迭代器以消除对 @987654323 的需要@当使用strtotime计算下一个日期时。

    chart = new Highcharts.Chart({
    
      xAxis:
      {
    
        categories: [
    
    <?php
    
          // You could dynamically set this date using $_GET/$_POST
          $start = '2012-03-01';
    
          $dates = array();
    
          for ($i = 0, $days = date('t', strtotime($start)); $i < $days; ++$i)
          {
            $dates[] = date('Y-m-d', strtotime($start . ' + ' . $i . ' day'));
          }
    
          echo "'" . implode("', '", $dates) . "'";
    
    ?>
    
        ],
    
      },
    
      series:
      [
    
    <?php
    
        foreach ($array as $legend => $data)
        {
    
          echo '{';
    
          echo "name: '" . $legend . "',";
    
          $values = array();
    
          for ($i = 0; $i < $days; ++$i)
          {
    
            $date = date('Y-m-d', strtotime($start . ' + ' . $i . ' day'));
    
            $values[] = isset($data[$date]) ? $data[$date] : 0;
    
          }
    
          echo 'data: [' . implode(', ', $values) . '],';
    
          echo '},';
    
        }
    
    ?>
    
      ],
    
    }
    );
    

    【讨论】:

    • 嗨,迈克尔,这看起来非常有用,谢谢。我目前正在使用 PDO $stmt->fetchAll(PDO::FETCH_ASSOC);渲染我的数组。关于如何将输出更改为您建议的数组的任何想法?
    • 迭代结果并执行$array[$row['legend']][$row['day']] = $row['amount'];
    • 感谢 Michael 的代码似乎已经到了。我无法更新数据系列。
    • 删除了之前的评论;我已经编辑了我的示例代码,以将完整日期作为金额值的关键。我还整理了生成类别的代码。
    • 我的荣幸。正如您可能已经看到的,我还包含了 $start 变量,以便您可以轻松地使用其他年份/月份,而无需更改脚本(除了将 '2012-03-01' 更改为一些 $_GET/@987654330 @变量(或您自己的其他变量)
    【解决方案2】:

    你需要转换你的 php 数组输出有用的 fr highcharts 使用。试试json_encode。看看这里http://code.google.com/p/highchartwrapper/

    【讨论】:

      【解决方案3】:

      你走错路了。如果您搜索已经可用的东西,那么您应该以他们接受的方式输出数据。反之亦然。

      话虽如此,请尝试pChart。它广泛支持不同的格式。

      【讨论】:

        猜你喜欢
        • 2021-09-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-02-02
        • 1970-01-01
        • 2016-04-02
        • 1970-01-01
        相关资源
        最近更新 更多