Chart Js - 在不限制数据的情况下限制图表上的点

Question

我有一个 chart.js 图表需要从大量点（比如 1000）中绘制出来。当我绘制所有这些点时，它看起来很糟糕，所以我寻找一种方法来限制这些点。我使用了此处描述的方法：

这个可以，但是有个大问题。它错过了 1000 点的一些重要高点和低点，基本上绘制了一个不正确的图表。

有没有办法在不遗漏某些值的情况下不这样做？基本上用所有 1000 个点绘制图表，但在上面显示 30 个点。

我尝试了一些插件（抽取、下采样），但它们似乎需要矢量才能工作（如 {x,y}）。我的数据是 x 轴上用于日期的字符串数组和 y 轴上用于价格的浮点数数组。

谢谢！

Answer 1

您可以使用 Chart.js 内置 Data Decimation 插件。

您的基础数据由两个数组组成，一个包含日期字符串，另一个包含价格。这些可以很容易地转换为数据点数组（每个对象具有 x 和 y 属性），如下所示。

data: dateStrings.map((d, i) => ({ x: Date.parse(d), y: prices[i] }))

此外，您必须满足抽取插件的所有 requirements。我还必须明确定义 options.parsing: false.

请看一下可运行代码，看看它是如何工作的。

const dateStrings = [];
const prices = [];

// create sample data (dateStrings & prices)
const date = new Date();
date.setDate(date.getDate() - 100);
for (let i = 0; i < 100; i ++) {
  date.setDate(date.getDate() + 1);
  dateStrings.push(date.toISOString().substring(0,10));  
  prices.push(parseInt(Math.random() * 1000));
}

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: dateStrings.map((d, i) => ({ x: Date.parse(d), y: prices[i] })),
      lineTension: 0.3,
      borderColor: 'rgb(100, 100, 255)'
    }],
  },
  options: {
    parsing: false,
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'lttb',
        samples: 20,
        threshold: 20
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM yyyy'
          },
          tooltipFormat: 'D MMM yyyy'
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Chart Js - 在不限制数据的情况下限制图表上的点

Chart Js - Limit points on graph without limiting data

javascript

chart.js