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

Question

我设置了一个chart.js图表，它使用mysql数据库中的数据。我已经建立了一个rest服务来提供tha数据，具有定义分组IE的能力。数据每隔5分钟测量一次，但我将其分组为3小时段，使用我的SQL语句select(75-round(avg(sensorValue)，0))作为值，从sensorpi.rawdata组按UNIX_TIMESTAMP(Time)DIV$default_interval顺序按Time asc

我希望能够通过定义一个新的粒度来改变数据的粒度。

我创建了一个更新函数来将请求发送到后端，并更新图表。

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

我的直觉是X轴的日期标签造成了麻烦。但我不知如何解决。

下面是一个MVE（也在jsfiddle:https://jsfidle.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（）与时间刻度数据集，并与发帖人进行了交流，发帖人分享了他的解决方案，该方案本质上是销毁图表并重新绘制它。我对这种方法不满意...

Answer 1

似乎有一种黑客手段：

pilleChart.config.data.labels = newLabels

参见:https://jsfidle.net/0agcu3ps/3/

ps：您的演示有一个bug,var labels10=[“Tue Nov 13 2018 02:00:00 GMT+0100”,第一项错误,应该是Nov 12:d