javascript - Updating chart.js chart with dataset of different size
问题描述
I have set up a chart.js chart which uses data from a mysql database. I have set up a rest service to provide tha data, with the ability to define the grouping ie. the data is measured a five minute intervals, but I group it in 3 hour segments with my SQL statement SELECT (75-round(avg(sensorValue),0)) as Value, Time FROM sensorpi.rawData GROUP BY UNIX_TIMESTAMP(time) DIV $default_interval ORDER BY time asc
I would like to be able to change the granularity of the data by defining a new granularity.
I created an update function to send the request to the backend, and update the chart.
The chart is updated, but the default has 61 entries (at the moment) and the most fine-grained data has 180 entries. What happens is that the data is just reduced to the first 61 items in the dataset.
My gut feeling is that it is the date label of the X-Axis which is causing the trouble. But i am at a loss as to how i can solve it.
Here is a MVE (also on JSFiddle: https://jsfiddle.net/0agcu3ps/2/ )
var data05 = [1, 2, 5, 7, 16];
var data10 = [1,2,3,4,5,6,7,8,12,16];
var labels05 = [
"Mon Nov 12 2018 02:00:00 GMT+0100",
"Mon Nov 12 2018 12:00:00 GMT+0100",
"Tue Nov 13 2018 18:00:00 GMT+0100",
"Wed Nov 14 2018 02:00:00 GMT+0100",
"Thu Nov 15 2018 14:00:00 GMT+0100"];
var labels10 = [
"Tue Nov 12 2018 02:00:00 GMT+0100",
"Mon Nov 12 2018 10:00:00 GMT+0100",
"Mon Nov 12 2018 12:00:00 GMT+0100",
"Tue Nov 13 2018 14:00:00 GMT+0100",
"Tue Nov 13 2018 18:00:00 GMT+0100",
"Tue Nov 13 2018 20:00:00 GMT+0100",
"Wed Nov 14 2018 02:00:00 GMT+0100",
"Wed Nov 14 2018 10:00:00 GMT+0100",
"Thu Nov 15 2018 12:00:00 GMT+0100",
"Thu Nov 15 2018 14:00:00 GMT+0100"];
window.updateChartData = function() {
var newData = [];
var newLabels =[];
var intrval = document.getElementById("interval").value;
if(intrval == 5){
newData = data05;
}else if (intrval == 10) {
newData = data10;
}
pilleChart.data.datasets[0].data = newData;
pilleChart.data.datasets[0].labels = newLabels;
console.log("updating chart");
pilleChart.update();
}
function drawLineChart() {
// Create the chart.js data structure using 'labels' and 'data'
var pilleData = {
labels: labels05,
datasets: [{
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(200,200,205,0.7)",
borderColor: "rgba(151,187,205,0.9)",
borderWidth: 1,
fill: false,
label: 'Pilleniveau',
data: data05
}
]
};
var options = {
showLines: true,
responsive: true,
title: {
display: true,
text: 'Pilleniveau i beholder'
},
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: true
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2,
borderColor: "rgba(200,170,150,1)",
borderWidth: 2,
label: {
enabled: false,
content: 'Test label'
}
}
]
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}
],
//Set X-Axis to date instead of labels
xAxes: [{
type: 'time',
time: {
unit: 'day'
}
}
]
}
}
var ctx = document.getElementById("pilleChart").getContext("2d");
// Instantiate a new chart
pilleChart = new Chart(ctx, {
type: 'line',
data: pilleData,
options: options
});
}
drawLineChart();
EDIT: I have been reading on Chart.js -- using update() with time scale datasets and communicated with the poster, who shared his solution, which is essentially to destroy the chart and draw it anew. I am not satisfied with that approach...
解决方案
似乎有一种破解方法:
pilleChart.config.data.labels = newLabels
见:https ://jsfiddle.net/0agcu3ps/3/
ps:你的demo有个bug,第一项var labels10 = ["Tue Nov 13 2018 02:00:00 GMT+0100",
是错的,应该是Nov 12
:D
推荐阅读
- python - Pip install --upgrade 导致意外版本
- amazon-web-services - AWS t2.micro 上的 Neo4J
- javascript - 使用反应显示服务器响应
- excel - Excel 如何使选项卡 2 中的单元格仅在选项卡 1 的下拉单元格中的某个值被选中时才显示选项卡 3 中单元格的值
- nginx - NGINX 回退到 502 和 503 上的替代上游
- react-native - 如何使用反应原生画布?
- mysql - 为什么在我尝试创建外键时会出现错误提示该列不存在
- python - K-fold 交叉验证实现
- c++ - C++ 上的接口
- html - 从链接打开新页面时出现问题 - 它总是在页面中间打开