chartJS - 指出过度绘图，抖动，噪音？

Question

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

正如您所看到的，数据点彼此重叠，这使得它更难阅读。在 RStudio 中有一个解决方案，您只需设置 position =“jittering”，它会在点周围添加轻微的噪音。

Answer 1

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

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

jitter

这是一个codepen example，显示了包含原始和抖动数据的图表的并排示例。

2）使用上面的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, } }); }; 函数并将其添加为chart.js插件，以便您可以在任何给定的图表中自动启用/禁用它。以下是一个示例（请注意，我们正在使用上面的jitter函数。

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);
      });
    }
  }
});

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

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