使用从 php 返回的 json 数据时，CanvasJS 图表无法正确呈现答案

【问题标题】：CanvasJS chart not rendering properly when using json data returned from php使用从 php 返回的 json 数据时，CanvasJS 图表无法正确呈现
【发布时间】：2017-01-25 00:47:32
【问题描述】：

您好我正在尝试使用 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
    }]
}]

【问题讨论】：

如果我从 javascript 中的 axisX 中删除间隔参数，它现在呈现但它的呈现时间是几小时而不是几天？

标签： php json ajax charts canvasjs

【解决方案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>

【讨论】：