使用 json 数据在 chart.js 中绘制折线图答案

【问题标题】：Drawing line chart in chart.js with json data使用 json 数据在 chart.js 中绘制折线图
【发布时间】：2016-12-27 16:13:29
【问题描述】：

我正在尝试使用来自我的 MongoDB 的 JSON 响应来绘制折线图。我认为我的代码不正确，我不断收到this error

我试过这个。

myurl = "/api/humidity"
$(function() {
    $.ajax({
        type: "GET",
        url: myurl,
        cache: false,
        dataType : "json",
        success: function (data1) {
         //   console.log(data);
            $.each(data1.when, function(position, when) {

                if (data1.when) {

                    chartData.labels.push(data1.when);
                } else {

                    chartData.labels.push('');
                }
                chartData.datasets[0].data.push(data.message);

            });
        }
    })
})


var chartData = {
    labels: [],
    datasets: [
        {
            label: "Humidity",
            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: []
        },

    ]
};


var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Line (chartData, {

});

最终我希望我的代码能够迭代我的数据库中的项目直到完成。

这就是我的 JSON 数据的样子

[{
    "_id": "585b544f5c86b6c8537c34d6",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:27.000Z"
}, {
    "_id": "585b54505c86b6c8537c34d7",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:28.000Z"
}, {
    "_id": "585b54515c86b6c8537c34d8",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:29.000Z"
}, {
    "_id": "585b54525c86b6c8537c34d9",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:30.000Z"
}, {
    "_id": "585b54535c86b6c8537c34da",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:31.000Z"}]

我将不胜感激任何帮助或建议。

【问题讨论】：

标签： javascript json mongodb chart.js linechart

【解决方案1】：

您可以尝试使用 chart.js 2.2 版

var cdata = [{
    "_id": "585b544f5c86b6c8537c34d6",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:27.000Z"
}, {
    "_id": "585b54505c86b6c8537c34d7",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:28.000Z"
}, {
    "_id": "585b54515c86b6c8537c34d8",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:29.000Z"
}, {
    "_id": "585b54525c86b6c8537c34d9",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:30.000Z"
}, {
    "_id": "585b54535c86b6c8537c34da",
    "topic": "Humidity",
    "message": 23,
    "when": "2016-12-22T04:19:31.000Z"
}]

var labeldata = [];

var chrtdata = [];

for(var i =0; i < cdata.length; i++)
{
  labeldata.push(cdata[i].when);
  chrtdata.push(cdata[i].message)
}




var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labeldata,
    datasets: [{
      label: 'Humidity',
      data: chrtdata,
      backgroundColor: "rgba(153,255,51,0.6)"
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
 <div>
    <canvas id="myChart"></canvas>
  </div>

【讨论】：

感谢您的回复。但是 JSON 数据是动态的。从我的代码中可以看出，它是从 URL 提供的。
@Ekom 很高兴为您提供帮助

【解决方案2】：

你应该这样设置 myChart：

var myChart = Chart.Line(ctx, {
    data: chartData,
    options: options
});

变量 'ctx' 应该被传递给 Chart 函数。

http://www.chartjs.org/docs/#line-chart

【讨论】：

收到另一个错误TypeError: null is not an object (evaluating 'document.getElementById("myChart").getContext')
您是在内部还是在末尾调用 JavaScript？看起来 Chart.js 正在尝试在画布在页面上完成加载之前加载画布对象。