使用不同大小的数据集更新 chart.js 图表

2022-01-22 00:00:00 javascript chart.js

我已经建立了一个使用 mysql 数据库数据的 chart.js 图表.我已经建立了一个休息服务来提供数据，能够定义分组，即.数据每隔五分钟测量一次，但我用我的 SQL 语句 SELECT (75-round(avg(sensorValue),0)) 作为值，时间从 sensorpi.rawData GROUP BY UNIX_TIMESTAMP(time) DIV $default_interval ORDER BY time asc

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.

图表已更新，但默认有 61 个条目(目前)，最细粒度的数据有 180 个条目.发生的情况是数据只是减少到数据集中的前 61 项.

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.

我的直觉是造成问题的是 X 轴的日期标签.但是我不知道如何解决它.

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.

这是一个 MVE(也在 JSFiddle 上:https://jsfiddle.net/0agcu3ps/2/)

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();

我一直在阅读 Chart.js -- 使用 update()使用时间尺度数据集并与发布者进行了交流，发布者分享了他的解决方案，这本质上是破坏图表并重新绘制它.我对这种方法不满意...

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",第一项错了，应该是<代码>11 月 12 日 :D

ps: there is a bug in your demo, the first item of var labels10 = ["Tue Nov 13 2018 02:00:00 GMT+0100", is wrong, it should be Nov 12 :D

相关文章