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

Question

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

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

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

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

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

这是一个 MVE(也在 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 -- using update() with time scale datasets并与发帖者进行了交流，发帖者分享了他的解决方案，本质上是将图表销毁并重新绘制。我对这种方法不满意...

Answer 1

好像有破解方法:

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