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

标签 javascript php json plot graph

我在使用 chart.js 和我生成的 json 数据 (php) 创建图表时遇到了一些麻烦。

我写了这段代码:

测试.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

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

Json.php 是自 mysql 查询以来生成的文件。如果我用

替换标签
labels: ["January", "February", "March", "April", "May", "June", "July"],

和数据

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

有效!

你能帮帮我吗?我确定我错过了一件小事。谢谢

最佳答案

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

我想你把“长度”这个词弄错了……

关于javascript - 如何在 chart.js 中使用 json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39894348/

相关文章:

javascript - Node/Express 路由不等待 Redis 服务器回调

jquery - 来自 LinkedIn 和 StumbleUpon 的 JSONP 请求

javascript - 如果某个键的值可能为空,则解构对象

javascript - 替换 javascript 或 angularjs 中字符串中某些字符的存在

Javascript 将数据操作为 d3 堆积图的对象数组

php - 在 foreach 循环 php 的 10 个值之后中断并创建新的 <ul>

php - mkdir() 不适用于此代码来创建上传照片的随机目录名称

php - 如何在我的 Laravel 包中包含 bootstrap 和 jquery

php - symfony 从 json 数据中保留日期时间

javascript - 使用 :lt(3) Selector 为每个元素设置不同的背景颜色