chartJS - 点重叠、抖动、噪音？

Question

嘿，我正在使用 chartJS，我有一个看起来像这样的图表：

如您所见，数据点相互重叠，因此更难阅读。在 RStudio 中有一个解决方案，您只需设置 position="jittering" 它会在点周围添加轻微的噪音。

Answer 1

不幸的是，今天 chart.js 没有这样的能力。但是，这并不意味着您仍然无法获得所需的功能。我想到了几个选项。

1) 实现您自己的 jitter 函数并使用它在传递给 chart.js 之前预处理您的数据。这是一个例子。

var jitter = function(data) {
    return data.map(function(e) {
    var xJitter = Math.random() * (-1 - 1) + 1;
    var yJitter = Math.random() * (-1 - 1) + 1;

    return {
      x: e.x + xJitter,
      y: e.y + yJitter,
    }
  });
};

这里是 codepen example 并排显示原始数据和抖动数据的图表示例。

2) 使用上面的 jitter 函数并将其添加为 chart.js 插件，这样您就可以在任何给定图表中自动 enable/disable 它。这是一个示例（请注意，我们正在使用上面的 jitter 函数。

Chart.plugins.register({
  afterInit: function(chartInstance) {
    if (chartInstance.config.options.jitter) {
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;

      chartInstance.data.datasets.forEach(function (dataset) {
        dataset.data = jitter(dataset.data);
      });
    }
  }
});

然后将其添加到您的图表选项配置中。

options: {
  jitter: true,
}

这里是 codepen example 并排显示使用插件的原始数据和抖动数据的图表示例。

显然，您可能希望实现一个更强大的 jitter 函数，该函数接受某种抖动选项，以便它可以智能地应用于任何类型的数据集。如果您决定采用这种方法，我会将其留给您实施。

chartJS - 点重叠、抖动、噪音？

chartJS - points overplotting, jittering, noise?

charts

point

rstudio

chart.js