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>

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

1 个答案: