chart.js - 如何限制chart.js中显示的点数？

Question

我的图表中 x 轴上的点太多。我想将显示点的最大值限制为 100。但同时仍显示相同的图表。完全相同的图表 - 但点数更少。

我的图表有太多点的屏幕截图

我不知道如何在服务器端的 PHP 中做到这一点，所以我想在 chart.js 的客户端是否有任何解决方案？

标签： chart.js

Answer 1

对于大型数据集，chart.js确实提供了一个数据抽取插件，可在图表生命周期开始时自动抽取数据，从而减少绘制的数据点数量。根据chart.js文档，要使用抽取插件，必须满足以下要求：

• 数据集必须有一个数据indexAxis集'x'必须是一行
• 数据集的 X 轴必须是 a'linear'或'time'type 轴
• 数据必须不需要解析，即parsing必须是false
• 数据集对象必须是可变的。该插件存储原始数据
• asdataset._data然后data在数据集上定义一个新属性。

您的图表选项应如下所示：

options: {
    parsing: false,
    plugins: {
      decimation: {
         enabled: false,
         algorithm: 'min-max',
      },
    },
    scales: {
      x: {
        type: 'time',
        ticks: {
          source: 'auto',
          autoSkip: true,
        }
      }
    }

还请记住，如果您禁用解析您传递的数据应该是您选择的图表类型的正确格式，因此在这种情况下是纪元时间戳。更多信息在这里。

最后，您可以在此处找到一个工作示例。