简体   繁体   English

如何在chart.js中使用json数据

[英]How to use json data with chart.js

I have some troubles to create a graph using chart.js and json data generated by me (php). 我使用我(php)生成的chart.js和json数据创建图形时遇到了一些麻烦。

I wrote this code : 我写了这段代码:

test.php test.php的

<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<canvas id="myChart" width="740" height="200"></canvas>


<script type="text/javascript">

$.getJSON("json.php", function (result) {
    var labels = [], data = [];

    for (var i = 0; i < result.lenght ; i++){
            labels.push(result[i].time);
            data.push(result[i].mms);
            console.log("result");
    }

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                    labels: labels,
            datasets: [
            {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: data
            }
            ]}
});
});
</script>

json.php json.php

[
{
"time": "2016-09-01 00:00:07",
"mms": 1430
},
{
"time": "2016-09-01 00:05:08",
"mms": 2237
}
]

Json.php is file generated since a mysql query. Json.php是自mysql查询以来生成的文件。 If I replace labels by 如果我将标签替换为

labels: ["January", "February", "March", "April", "May", "June", "July"],

and data by 和数据

data: [65, 59, 80, 81, 56, 55, 40]

It works ! 有用 !

Can you help me please. 你能帮我吗。 I'm sure that I miss a little thing. 我确定我会错过一点事情。 Thanks 谢谢

for (var i = 0; i < result.lenght ; i++){

我认为您错误地将“长度”这个词...

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM