[英]How to destroy line graph in ChartJS
I got a graph that updates when I select start and end date from my JSON data.当我从我的 JSON 数据中选择开始和结束日期时,我得到了一个更新的图表。 But the old graph still appears when I hover over the points.
但是当我将鼠标悬停在这些点上时,旧图表仍然出现。
I have read a lot of post about using myLineChart.destroy();
我已经阅读了很多关于使用
myLineChart.destroy();
的帖子myLineChart.destroy();
but I'm unable to find a means to add to my graph .但我找不到添加到我的图表的方法。
var cdata = [{ "_id": "585b544f5c86b6c8537c34d6", "topic": "Humidity", "message": 30, "message1": 2, "when": "2016-12-22T04:19:27.000Z" }, { "_id": "585b54505c86b6c8537c34d7", "topic": "Humidity", "message": 10, "message1": 25, "when": "2016-12-22T04:19:28.000Z" }, { "_id": "585b54515c86b6c8537c34d8", "topic": "Humidity", "message": 20, "message1": 30, "when": "2016-12-22T04:19:29.000Z" }, { "_id": "585b54525c86b6c8537c34d9", "topic": "Humidity", "message": 50,"message1": 40, "when": "2016-12-22T04:19:30.000Z" }, { "_id": "585b54535c86b6c8537c34da", "topic": "Humidity", "message": 45, "message1": 21, "when": "2016-12-22T04:19:31.000Z" }] var labeldata = []; var chrtdata = []; var chartdata = []; for(var i =0; i < cdata.length; i++) { labeldata.push(cdata[i].when); chrtdata.push(cdata[i].message) chartdata.push(cdata[i].message1) } var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: { labels: labeldata, datasets: [{ label: 'Humidity', data: chrtdata, backgroundColor: "rgba(255, 51, 0,0.6)" }, { label: 'Temperature', data: chartdata, backgroundColor: "rgba(102, 0, 255,0.6)" }, ] } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> <canvas id="myChart" width="400" height="400"></canvas>
I would appreciate if someone can help me out with this.如果有人能帮我解决这个问题,我将不胜感激。
Here is the example you can change your graph with dynamic values without destroying it.这是您可以使用动态值更改图形而不破坏它的示例。 Hope it helps.
希望能帮助到你。
function getRandomJson() {
var cdata = [{
"_id": "585b544f5c86b6c8537c34d6",
"topic": "Humidity",
"message": Math.floor(Math.random() * (100 - 20 + 1)) + 20,
"message1": Math.floor(Math.random() * (50 - 5 + 1)) + 5,
"when": "2016-12-22T04:19:27.000Z"
}, {
"_id": "585b54505c86b6c8537c34d7",
"topic": "Humidity",
"message": Math.floor(Math.random() * (80 - 1 + 1)) + 1,
"message1": Math.floor(Math.random() * (40 - 5 + 1)) + 5,
"when": "2016-12-22T04:19:28.000Z"
}, {
"_id": "585b54515c86b6c8537c34d8",
"topic": "Humidity",
"message": Math.floor(Math.random() * (90 - 20 + 1)) + 20,
"message1": Math.floor(Math.random() * (60 - 20 + 1)) + 20,
"when": "2016-12-22T04:19:29.000Z"
}, {
"_id": "585b54525c86b6c8537c34d9",
"topic": "Humidity",
"message": Math.floor(Math.random() * (50 - 40 + 1)) + 40,
"message1": Math.floor(Math.random() * (70 - 30 + 1)) + 30,
"when": "2016-12-22T04:19:30.000Z"
}, {
"_id": "585b54535c86b6c8537c34da",
"topic": "Humidity",
"message": Math.floor(Math.random() * (85 - 20 + 1)) + 20,
"message1": Math.floor(Math.random() * (65 - 35 + 1)) + 35,
"when": "2016-12-22T04:19:31.000Z"
}];
return cdata;
}
loadGraph();
function loadGraph() {
var labeldata = [];
var chrtdata = [];
var chartdata = [];
var cdata = getRandomJson();
for(var i =0; i < cdata.length; i++)
{
labeldata.push(cdata[i].when);
chrtdata.push(cdata[i].message)
chartdata.push(cdata[i].message1)
}
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labeldata,
datasets: [{
label: 'Humidity',
data: chrtdata,
backgroundColor: "rgba(255, 51, 0,0.6)"
},
{
label: 'Temperature',
data: chartdata,
backgroundColor: "rgba(102, 0, 255,0.6)"
},
]
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<button type="button" onClick="loadGraph()">Change Me!</button>
<canvas id="myChart" width="400" height="400"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.