Question

我在一个项目中，只需要显示chart.js的最后100个样本。现在，我有这个：

我正在使用node和mongo，我的查询已经给出了最后100个。如果我有100个样本，它将反映在chartjs上吗？

代码：

var lineChartData = {
      labels: parsedTime,
      datasets: [
        {
          label: "Umidade",
          data: parsedHumidity,
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
          ],
          borderColor: [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
          ],
          borderWidth: 1
        }
      ],
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    };

此外，API每30秒接收一次样本。如何仅实时显示最近的100个样本？

谢谢你们

Answer 1

Chartjs提供了即时添加和删除数据的功能。

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

每次api返回最新记录时，您都将使用上述功能使用最新接收到的数据来更新图表。参考：https://www.chartjs.org/docs/latest/developers/updates.html

如何限制100个Chartjs中的样本

1 个答案: