使用從 php 返回的 json 數據時，CanvasJS 圖表無法正確呈現

Question

嗨，我正在嘗試使用 CanvasJS 來使用從 php 返回的 JSON 數據呈現面積圖。 圖表呈現但沒有任何值，並且除了軸之外只是空白。

JSON 輸出一定有問題，但我不明白為什么？

Javascript：

 $(document).ready(function(){
        $("#click").click(function(){
            $.ajax({
                type: "POST",
                url: "data.php",
                dataType: 'json',
                success: function(data) {
                    loadChart(data);

                }
            });
        });
    });



    function loadChart(response) {
        console.log(response);
        var chart = new CanvasJS.Chart("chartContainer",
            {
                title: {
                    text: "Email Analysis"
                },
                animationEnabled: true,
                axisX:{
                    interval: 3
                    // labelAngle : 30,
                    // valueFormatString: "HHmm'hrs'"

                },
                axisY: {
                    title: "kWH"
                },
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center"
                },

                data: response

            });

        chart.render();
    }

  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  <input id="click" type="button">

返回 JSON 的 php 腳本：

$begin = new DateTime( '2017-01-01' );
$end = new DateTime( '2017-01-31' );

$interval = DateInterval::createFromDateString('1 day');
$period = new DatePeriod($begin, $interval, $end);

$data[0] = array(
'name'=> "Electricy",
'showInLegend' => true,
'legendMarkerType' => "square",
'type' => "area",
'color' => "rgba(40,175,101,0.6)",
'markerSize' => 0,
'xValueType' => "dateTime",
);

foreach ( $period as $dt ){
   $data[0]['dataPoints'][] = array('x' => $dt->getTimestamp(), 'y' =>    10);
}


$data[1] = array(
   'name'=> "Gas",
   'showInLegend' => true,
   'legendMarkerType' => "square",
   'type' => "area",
   'color' => "rgba(40,175,101,0.6)",
   'markerSize' => 0,
   'xValueType' => "dateTime",
);

foreach ( $period as $dt ){
   $data[1]['dataPoints'][] = array('x' => $dt->getTimestamp(), 'y' =>    20);
}

$data = json_encode($data);
echo $data;
die();

它輸出以下 JSON：

[{
    "name": "Electricy",
    "showInLegend": true,
    "legendMarkerType": "square",
    "type": "area",
    "color": "rgba(40,175,101,0.6)",
    "markerSize": 0,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1483228800,
        "y": 10
    }, {
        "x": 1483315200,
        "y": 10
    }, {
        "x": 1483401600,
        "y": 10
    }, {
        "x": 1483488000,
        "y": 10
    }, {
        "x": 1483574400,
        "y": 10
    }, {
        "x": 1483660800,
        "y": 10
    }, {
        "x": 1483747200,
        "y": 10
    }, {
        "x": 1483833600,
        "y": 10
    }, {
        "x": 1483920000,
        "y": 10
    }, {
        "x": 1484006400,
        "y": 10
    }, {
        "x": 1484092800,
        "y": 10
    }, {
        "x": 1484179200,
        "y": 10
    }, {
        "x": 1484265600,
        "y": 10
    }, {
        "x": 1484352000,
        "y": 10
    }, {
        "x": 1484438400,
        "y": 10
    }, {
        "x": 1484524800,
        "y": 10
    }, {
        "x": 1484611200,
        "y": 10
    }, {
        "x": 1484697600,
        "y": 10
    }, {
        "x": 1484784000,
        "y": 10
    }, {
        "x": 1484870400,
        "y": 10
    }, {
        "x": 1484956800,
        "y": 10
    }, {
        "x": 1485043200,
        "y": 10
    }, {
        "x": 1485129600,
        "y": 10
    }, {
        "x": 1485216000,
        "y": 10
    }, {
        "x": 1485302400,
        "y": 10
    }, {
        "x": 1485388800,
        "y": 10
    }, {
        "x": 1485475200,
        "y": 10
    }, {
        "x": 1485561600,
        "y": 10
    }, {
        "x": 1485648000,
        "y": 10
    }, {
        "x": 1485734400,
        "y": 10
    }]
}, {
    "name": "Gas",
    "showInLegend": true,
    "legendMarkerType": "square",
    "type": "area",
    "color": "rgba(40,175,101,0.6)",
    "markerSize": 0,
    "xValueType": "dateTime",
    "dataPoints": [{
        "x": 1483228800,
        "y": 20
    }, {
        "x": 1483315200,
        "y": 20
    }, {
        "x": 1483401600,
        "y": 20
    }, {
        "x": 1483488000,
        "y": 20
    }, {
        "x": 1483574400,
        "y": 20
    }, {
        "x": 1483660800,
        "y": 20
    }, {
        "x": 1483747200,
        "y": 20
    }, {
        "x": 1483833600,
        "y": 20
    }, {
        "x": 1483920000,
        "y": 20
    }, {
        "x": 1484006400,
        "y": 20
    }, {
        "x": 1484092800,
        "y": 20
    }, {
        "x": 1484179200,
        "y": 20
    }, {
        "x": 1484265600,
        "y": 20
    }, {
        "x": 1484352000,
        "y": 20
    }, {
        "x": 1484438400,
        "y": 20
    }, {
        "x": 1484524800,
        "y": 20
    }, {
        "x": 1484611200,
        "y": 20
    }, {
        "x": 1484697600,
        "y": 20
    }, {
        "x": 1484784000,
        "y": 20
    }, {
        "x": 1484870400,
        "y": 20
    }, {
        "x": 1484956800,
        "y": 20
    }, {
        "x": 1485043200,
        "y": 20
    }, {
        "x": 1485129600,
        "y": 20
    }, {
        "x": 1485216000,
        "y": 20
    }, {
        "x": 1485302400,
        "y": 20
    }, {
        "x": 1485388800,
        "y": 20
    }, {
        "x": 1485475200,
        "y": 20
    }, {
        "x": 1485561600,
        "y": 20
    }, {
        "x": 1485648000,
        "y": 20
    }, {
        "x": 1485734400,
        "y": 20
    }]
}]

Answer 1

看起來您使用的是舊版本的庫。 我已經將您的 json 數據與最新的 CDN 版本一起使用，它似乎工作正常。

編輯您看到小時是因為您在 PHP 中生成 Unix 時間戳（以秒為單位）。 要轉換為 javascript 時間戳，請將值乘以 1000 ： $dt->getTimestamp() * 1000

我已經用 json 數據乘以 1000 更新了這個演示http://jsbin.com/nezigexilu/1/edit?html,output

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>