Question

所以我目前正致力于使用Morris.JS和PHP构建一个简单的区域图表。

我有我的PHP数组，它会吐出我目前想要的所有数据，而且我还有一个简单的图表演示并运行。从这个意义上说，一切都运作良好。

现在唯一要做的就是将PHP数组数据挂钩到Javascript中，将实际数据传递到图表中。如您所见，我需要将3个值传递到图表中（句点，读取和读取）。未读和阅读是明确的，并且在此期间我希望尽可能在一天之前将其拆分

为了让事情变得简单 - 我在同一页面上包含了所有的PHP，Javascript和标记 - 当然我的目标是最终通过AJAX或其他东西传递数据，我只是试图了解如何将数组数据实际放入Javascript中。

我如何生成$lifeSpanArray数组：

$params = array(
                    'state' => 'all',
                    'sort' => 'newest',
                    'detailType' => 'simple'
                );

            $items = $pocket->retrieve($params, $accessToken);

            $lifeSpanArray = array();


            foreach ($items['list'] as $key) {

                $timeAdded = date('m/d/Y', $key["time_added"]); 

                if ($key["status"] == 1) {
                    $hasRead++;

                    $dateRead = date('m/d/Y', $key["time_read"]);

                    //Push into lifespan array
                    $lifeSpanArray[] = array('timeAdded' => $timeAdded,'timeRead' =>   $dateRead);

                }
                else {
                    $hasNotRead++;
                }

            }

数组的简单var_dump：

然后是Javascript：

$(function () {
        Morris.Area({
            element: 'morris-area-chart',
            data: [{
                period: '2010 Q1',
                read: 50,
                added: 100
            }, {
                period: '2010 Q2',
                read: 240,
                added: 400
            }, {
                period: '2010 Q3',
                read: 30,
                added: 15
            }, {
                period: '2010 Q4',
                read: 30,
                added: 100
            }],
            xkey: 'period',
            ykeys: ['read', 'added'],
            labels: ['Read', 'Added'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });
});

Answer 1

您可以使用json编码。所有内容都在一页上：

 Morris.Area({
        element: 'morris-area-chart',
        data: <?php echo json_encode($lifeSpanArray);?>,
        xkey: 'period',
        ykeys: ['read', 'added'],
        labels: ['Read', 'Added'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
    });

如果您将其分隔成seperare文件，可以从js调用getdata.php，如下所示：

//getdata.php

$lifeSpanArray = array();//your code for generating array goes here

//remember to set correct content type
header('Content-Type: application/json');
echo json_encode($lifeSpanArray);
die();

//js

$.get( "getdata.php", function( json ) {
  Morris.Area({
      element: 'morris-area-chart',
      data: json,
      xkey: 'period',
      ykeys: ['read', 'added'],
      labels: ['Read', 'Added'],
      pointSize: 2,
      hideHover: 'auto',
      resize: true
  });
});

如何将PHP数组中的数据传递到Javascript中以构建图表

1 个答案: