Question

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

将其分为3小时

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

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

图表已更新，但是默认值（目前）有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：您的演示中有一个错误，var labels10 = ["Tue Nov 13 2018 02:00:00 GMT+0100",的第一项错误，应该为Nov 12：D

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

1 个答案: