在chart.js中很难用折线图显示数据
[英]Difficult displaying data with linechart in chart.js
问题描述
Im trying to learn how to use chart.js but I cant get it to work with all those exemples out there. 
我试图学习如何使用chart.js，但我无法使其与所有这些示例一起使用。 I have a table in mysql with temperature-data and dates. 我在mysql中有一个带有温度数据和日期的表。 Managed to format it with json_encode in getdata.php, like this (small example); 设法用getdata.php中的json_encode格式化它，像这样（小示例）；
[
{
"date":"2018-04-01 00:00:02",
"temp":"1.2"
},
{
"date":"2018-04-01 01:00:50",
"temp":"1.0"
}
]
I have been struggling with it for a week now, trying all sorts of tutorials and examples with no luck :( Can someone please show me how to display this data as a simple linechart??? Anyone know of a example with similar data? 我已经努力了一个星期，尝试各种教程和示例都没有运气:(有人可以告诉我如何以简单的折线图显示此数据吗？有人知道具有相似数据的示例吗？
2 个解决方案
解决方案1
0 2018-04-03 20:55:02
Try this: 尝试这个：
HTML: HTML：
<!-- Importing Chart.js and creating our canvas to draw the line. -->
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
JAVASCRIPT: JAVASCRIPT：
// Our sample data.
var myDATA = [
{
"date":"2018-04-01 00:00:02",
"temp":"1.2"
},
{
"date":"2018-04-01 01:00:50",
"temp":"1.0"
}
];
// Grab the canvas.
var ctx = document.getElementById("myChart").getContext('2d');
// Paint to canvas a line chart with some options.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [myDATA[0].date, myDATA[1].date],
datasets: [{
label: 'TEMPERATURES',
data: [myDATA[0].temp, myDATA[1].temp]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
https://jsfiddle.net/j8h6qumq/10/ https://jsfiddle.net/j8h6qumq/10/
解决方案2
0 已采纳 2018-04-06 19:45:29
好的，它现在可以工作了……经过一番谷歌搜索，我发现我必须在canvas标签之后执行脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.