使用json數據在chart.js中繪製折線圖

我正在嘗試使用來自我的MongoDB的JSON響應繪製折線圖。我想我的代碼是關閉的地方，我不斷收到this error 使用json數據在chart.js中繪製折線圖

我試過了。

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"}]

我會感謝任何幫助或建議。

來源

2016-12-27 Ekom

您可以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>

來源

2016-12-27 17:35:26 Deep

感謝您的回覆。但是JSON數據是動態的。正如你從我的代碼中看到的那樣，它是從一個URL提供的。 – Ekom

你的代碼幫了很大忙。自己解決這個問題。 – Ekom

@Ekom樂於提供幫助 – Deep

您應該建立myChart這樣的：

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

變量「CTX」應以圖表的功能進行傳遞。

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

來源

2016-12-27 16:43:12 Jason

得到了另一個錯誤'類型錯誤：null不是（評估「的document.getElementById對象（「myChart 「）.getContext'）' – Ekom

你是在還是在的末尾打電話給你的JavaScript？它看起來像Chart.js試圖加載畫布對象之前，畫布完成加載在頁面上。 – Jason

看看我的HTML代碼 – Ekom

使用json數據在chart.js中繪製折線圖

回答

相關問題