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

cbjzeqam 于 2023-03-18 发布在 Chart.js

关注(0)|答案(3)|浏览(268)

在我的一个折线图中，我遇到了某些点重叠（即具有完全相同的x,y坐标）的情况。这是预期的行为，但我感兴趣的是找到一种方法来潜在地偏移/抖动任何重叠的点，以便不隐藏任何点。有人遇到过折线图上重叠点的类似情况吗？注意：我不能使用scatter类型，因为我的x轴是类别。
下面是一个小提琴演示重叠（用我的数据集的一个缩小样本）：https://jsfiddle.net/quanda412/407dcoL9/19/
在挖掘完文档后，我的第一个直觉是使用ChartJS Plugin Hooks中的一个函数，在该函数中遍历我的数据集以搜索任何重叠的示例，然后更改x或y位置。我在其他地方看到过这被称为“Jitter”，似乎一些图表库支持开箱即用的jitter功能。
无论如何，我的数据集是相当大的，当我迭代它时，例如在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 });
       });
   });
}

这里你可以看到重叠，灰点中的灰点：

chart.js

来源：https://stackoverflow.com/questions/57732359/chartjs-handling-of-overlapping-points-in-line-chart

3条答案

按热度按时间

jecbmhm31#

我能够用这个定制的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 });
          }
        });
       }
     }
   }
 }

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

赞(0）回复(0）举报 2023-03-18

vlju58qv2#

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

赞(0）回复(0）举报 2023-03-18

ej83mcc03#

一定是Chartjs的变化，我不得不修改当前版本的插件。基本上我只是从el._model.x和el.model.y中删除了_model，并添加了id：

var jitterEffectsPlugin = {
    id: 'jitterEffects',
    beforeDatasetDraw: function (ctx, args) {
        var _args = args,
            dataIndex = _args.index,
            meta = _args.meta;
        var points = meta.data.map(function (el) {
            return {
                x: el.x,
                y: el.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.x && point.y === el.y;
                    });

                    var overlap = false;
                    var overObj = JSON.parse(JSON.stringify(overlapFilter));
                    for (var i = 0; i < overObj.length; i++) {
                        if(overObj[i]['x'] === el.x && overObj[i]['y'] === el.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.x += 7;
                        } else {
                            el.x -= 7;
                        }

                        adjustedMap.push({
                            datasetIndex: datasetIndex,
                            dataIndex: dataIndex
                        });
                    }
                });
            }
        }
    }
}

赞(0）回复(0）举报 2023-03-18

我来回答

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

3条答案

相关问题

热门标签

最新问答