如何在 Chart.js 中正确显示大量信息而又不会造成过多的抽筋

Question

我正在尝试显示变得非常大的实时数据。问题是线条看起来很拥挤……我不想让所有的数据点都在现场，我可以在这里和那里失去一点准确性……

**这是：**

那么，有没有办法清理图表中的线条？最好不要删除数据中的起始元素。

**代码如下：**

  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: [new Date()],
      datasets: [
        {
          label: "# of Votes",
          data: [Math.random()],
          borderWidth: 4,
        },
      ],
    },
    options: {
      elements: {
        line: {
          backgroundColor: "#22ff2252",
          borderColor: "#00de00",
          fill: true,
          borderWidth: 10,
          tension: 0.05,
        },
        point: {
          radius: 0,
          borderWidth: 0,
          pointStyle: "triangle",
        },
      },
      scales: {
        y: {
          beginAtZero: false,
        },
        xAxis: {
          type: "time",
          ticks: {
            source: "auto",
            autoSkip: true,
            maxTicksLimit: 10,
            maxRotation: 0,
            minRotation: 0,
          },
          time: {
            unit: "second",
          },
        },
      },
    },
  });

  setInterval(() => {
    colors = ["#00de00", "#de0000"];
    myChart.options.elements.line.borderColor =
      colors[Math.floor(Math.random() * colors.length)];
    myChart.data.datasets[0].data.push(Math.random());
    var today = new Date();
    var time =
      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    myChart.data.labels.push(new Date());
    myChart.update();
  }, 2500);

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<div style="height: 90%; width: 90%">
  <canvas id="myChart"></canvas>
</div>

Answer 1

您可以使用 decimation plugin 来定义 'lttb' 或 'min-max' 算法选项。

LTTB 抽取显着减少了数据点的数量。这对于仅使用少数数据点显示数据趋势最有用。

Min/max 抽取将保留数据中的峰值，但每个像素最多可能需要 4 个点。这种类型的抽取适用于需要查看数据峰值的非常嘈杂的信号。

请查看 Data Decimation Sample 并了解其工作原理。

如何在 Chart.js 中正确显示大量信息而又不会造成过多的抽筋

How to display large amount of information properly without cramping too much in Chart.js

javascript

charts

canvas

graph

chart.js