图表Js -没有限制数据的图上的极限点

Question

我有一个chart.js图表，需要从大量的点(例如1000)绘制。当我绘制所有这些点的时候，它看起来很糟糕，所以我想找一种方法来限制这些。我使用了这里描述的方法：

用图表js限制数据点

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

有没有办法在不丢失一些价值的情况下做到这一点？基本上是用1000点来绘制图表，但上面显示的是30点。

我尝试过一些插件(抽取、下采样)，但它们似乎需要向量才能工作(比如{x，y})。我的数据是用于x轴上日期的字符串数组，以及y轴上用于价格的浮点数数组。

谢谢!

Answer 1

您可以使用Chart.js内置的数据抽取插件。

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

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

此外，你必须满足抽取插件的所有要求。我还必须显式地定义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>

​