时间戳

首页 > 解决方案 > 如何在 Chart.js 中正确显示大量信息而不会过于拥挤

javascript - 如何在 Chart.js 中正确显示大量信息而不会过于拥挤

问题描述

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

**这里是： ** 在此处输入图像描述

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

**这里是代码：**

  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>

标签： javascriptcanvasgraphchartschart.js

解决方案

您可以使用可让您定义or算法选项的抽取插件。'lttb''min-max'

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

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

请查看数据抽取示例并了解它是如何工作的。

推荐阅读