Question

在我的一个折线图中，我遇到了某些点重叠的实例（即具有完全相同的x,y坐标）。这是预期的行为，但是我很想找到一种方法来潜在地偏移/抖动任何重叠的点，从而使任何点都不被隐藏。有人遇到过折线图上重叠点的类似情况吗？注意：我不能使用scatter类型，因为我的x轴是类别。

以下是一个小提琴，用于演示重叠部分（以及我的数据集的缩小样本）：https://jsfiddle.net/quanda412/407dcoL9/19/

在仔细研究了文档之后，我的第一个直觉是进入ChartJS Plugin Hooks中的一个，然后在该函数中迭代我的数据集以搜索任何重叠的实例，然后更改x或y的位置。我在其他地方看到过这种情况称为“抖动”，而且似乎某些图表库开箱即用地支持抖动功能。

无论如何，我的数据集都很大，当我对其进行迭代时，例如在beforeDatasetUpdate挂钩中，该图表不仅会严重打击性能，而且这些点也不会按预期进行调整。

我在beforeDatasetDraw钩子中尝试抖动的代码示例：

beforeDatasetDraw: chart => {
    const { datasets } = chart.config.data;
    const coordinateMap = []; // holds array of unique coord objects
    datasets.forEach(d => {
        let elements = d._meta[5].data;
        elements.forEach((el, i) => {
            let { x, y } = el._model;
            const overlap = coordinateMap.find(coord => coord.x === x && coord.y === y);
            if (overlap) { // Overlap detected!
                // Update coordinate map
                x += 1;
                y += 1;
                // Jitter the x,y positioning - not working!
                d._meta[5].data[i]._model.x = x;
                d._meta[5].data[i]._model.y = y;
            }
            coordinateMap.push({ x, y });
       });
   });
}

在这里您可以看到重叠，即灰点内的灰点：

Answer 1

我可以使用此自定义beforeDatasetDraw插件实现有效的x轴抖动：

 beforeDatasetDraw(chart, args) {
  if (chart.animating || chart.$deferred.loaded) {
    const { index: dataIndex, meta } = args;
    const points = meta.data.map(el => ({ x: el._model.x, y: el._model.y }));
    const { length: dsLength } = chart.data.datasets;
    const adjustedMap = []; // keeps track of adjustments to prevent double offsets

    for (let datasetIndex = 0; datasetIndex < dsLength; datasetIndex += 1) {
      if (dataIndex !== datasetIndex) {
        const datasetMeta = chart.getDatasetMeta(datasetIndex);
        datasetMeta.data.forEach(el => {
          const overlap = points.find(point => point.x === el._model.x && point.y === el._model.y);
          if (overlap) {
            const adjusted = adjustedMap.find(item => item.datasetIndex === datasetIndex && item.dataIndex === dataIndex);
            if (!adjusted && datasetIndex % 2) { el._model.x += 7; } else { el._model.x -= 7; }
              adjustedMap.push({ datasetIndex, dataIndex });
          }
        });
       }
     }
   }
 }

这会产生抖动效果，如下所示：

Answer 2

感谢Quanda。我已经修改了上面的代码以支持IE浏览器。

var jitterEffectPlugin = {
                        beforeDatasetDraw: function (ctx, args) {
                            if (ctx.animating) {
                                var _args = args,
                                dataIndex = _args.index,
                                meta = _args.meta;
                                var points = meta.data.map(function (el) {
                                  return {
                                    x: el._model.x,
                                    y: el._model.y
                                  };
                                });
                                var dsLength = ctx.data.datasets.length;
                                var adjustedMap = []; // keeps track of adjustments to prevent double offsets
        
                                for (var datasetIndex = 0; datasetIndex < dsLength; datasetIndex += 1) {
                                  if (dataIndex !== datasetIndex) {
                                    var datasetMeta = ctx.getDatasetMeta(datasetIndex);
                                    datasetMeta.data.forEach(function (el) {
                                      var overlapFilter = points.filter(function (point) {
                                        return point.x === el._model.x && point.y === el._model.y;
                                      });

                                      var overlap = false;
                                      var overObj = JSON.parse(JSON.stringify(overlapFilter));
                                      for (var i = 0; i < overObj.length; i++) {
                                          if(overObj[i]['x'] === el._model.x && overObj[i]['y'] === el._model.y){
                                            overlap = true;
                                            break;
                                          }
                                      }
                                      if (overlap) {
                                        var adjusted = false;
                                        var adjustedFilter = adjustedMap.filter(function (item) {
                                            return item.datasetIndex === datasetIndex && item.dataIndex === dataIndex;
                                        });
                                        var adjObj = JSON.parse(JSON.stringify(adjustedFilter));
                                          for (var i = 0; i < adjObj.length; i++) {
                                              if(adjObj[i]['datasetIndex'] === datasetIndex && adjObj[i]['dataIndex'] === dataIndex){
                                                adjusted = true;
                                                break;
                                              }
                                          }

                                        if (!adjusted && datasetIndex % 2) {
                                          el._model.x += 7;
                                        } else {
                                          el._model.x -= 7;
                                        }
        
                                        adjustedMap.push({
                                          datasetIndex: datasetIndex,
                                          dataIndex: dataIndex
                                        });
                                      }
                                    });
                                  }
                                }
                            }
                        }
                    }

                    Chart.pluginService.register(jitterEffectPlugin);

ChartJS-折线图中重叠点的处理

2 个答案: