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

cbjzeqam  于 2023-03-18  发布在  Chart.js
关注(0)|答案(3)|浏览(300)

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

  1. beforeDatasetDraw: chart => {
  2.     const { datasets } = chart.config.data;
  3.     const coordinateMap = []; // holds array of unique coord objects
  4.     datasets.forEach(d => {
  5.         let elements = d._meta[5].data;
  6.         elements.forEach((el, i) => {
  7.             let { x, y } = el._model;
  8.             const overlap = coordinateMap.find(coord => coord.x === x && coord.y === y);
  9.             if (overlap) { // Overlap detected!
  10.                 // Update coordinate map
  11.                 x += 1;
  12.                 y += 1;
  13.                 // Jitter the x,y positioning - not working!
  14.                 d._meta[5].data[i]._model.x = x;
  15.                 d._meta[5].data[i]._model.y = y;
  16.             }
  17.             coordinateMap.push({ x, y });
  18.        });
  19.    });
  20. }

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

chart.js

3条答案

按热度按时间
jecbmhm3

jecbmhm31#

我能够用这个定制的beforeDatasetDraw插件实现有效的x轴抖动：

  1. beforeDatasetDraw(chart, args) {
  2.   if (chart.animating || chart.$deferred.loaded) {
  3.     const { index: dataIndex, meta } = args;
  4.     const points = meta.data.map(el => ({ x: el._model.x, y: el._model.y }));
  5.     const { length: dsLength } = chart.data.datasets;
  6.     const adjustedMap = []; // keeps track of adjustments to prevent double offsets
  8.     for (let datasetIndex = 0; datasetIndex < dsLength; datasetIndex += 1) {
  9.       if (dataIndex !== datasetIndex) {
  10.         const datasetMeta = chart.getDatasetMeta(datasetIndex);
  11.         datasetMeta.data.forEach(el => {
  12.           const overlap = points.find(point => point.x === el._model.x && point.y === el._model.y);
  13.           if (overlap) {
  14.             const adjusted = adjustedMap.find(item => item.datasetIndex === datasetIndex && item.dataIndex === dataIndex);
  15.             if (!adjusted && datasetIndex % 2) { el._model.x += 7; } else { el._model.x -= 7; }
  16.               adjustedMap.push({ datasetIndex, dataIndex });
  17.           }
  18.         });
  19.        }
  20.      }
  21.    }
  22.  }

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

展开查看全部
赞(0）分享  回复(0）举报  2023-03-18
vlju58qv

vlju58qv2#

谢谢Quanda.我已经修改了上面的代码来支持IE浏览器.

  1. var jitterEffectPlugin = {
  2.                         beforeDatasetDraw: function (ctx, args) {
  3.                             if (ctx.animating) {
  4.                                 var _args = args,
  5.                                 dataIndex = _args.index,
  6.                                 meta = _args.meta;
  7.                                 var points = meta.data.map(function (el) {
  8.                                   return {
  9.                                     x: el._model.x,
  10.                                     y: el._model.y
  11.                                   };
  12.                                 });
  13.                                 var dsLength = ctx.data.datasets.length;
  14.                                 var adjustedMap = []; // keeps track of adjustments to prevent double offsets
  15.         
  16.                                 for (var datasetIndex = 0; datasetIndex < dsLength; datasetIndex += 1) {
  17.                                   if (dataIndex !== datasetIndex) {
  18.                                     var datasetMeta = ctx.getDatasetMeta(datasetIndex);
  19.                                     datasetMeta.data.forEach(function (el) {
  20.                                       var overlapFilter = points.filter(function (point) {
  21.                                         return point.x === el._model.x && point.y === el._model.y;
  22.                                       });
  24.                                       var overlap = false;
  25.                                       var overObj = JSON.parse(JSON.stringify(overlapFilter));
  26.                                       for (var i = 0; i < overObj.length; i++) {
  27.                                           if(overObj[i]['x'] === el._model.x && overObj[i]['y'] === el._model.y){
  28.                                             overlap = true;
  29.                                             break;
  30.                                           }
  31.                                       }
  32.                                       if (overlap) {
  33.                                         var adjusted = false;
  34.                                         var adjustedFilter = adjustedMap.filter(function (item) {
  35.                                             return item.datasetIndex === datasetIndex && item.dataIndex === dataIndex;
  36.                                         });
  37.                                         var adjObj = JSON.parse(JSON.stringify(adjustedFilter));
  38.                                           for (var i = 0; i < adjObj.length; i++) {
  39.                                               if(adjObj[i]['datasetIndex'] === datasetIndex && adjObj[i]['dataIndex'] === dataIndex){
  40.                                                 adjusted = true;
  41.                                                 break;
  42.                                               }
  43.                                           }
  45.                                         if (!adjusted && datasetIndex % 2) {
  46.                                           el._model.x += 7;
  47.                                         } else {
  48.                                           el._model.x -= 7;
  49.                                         }
  50.         
  51.                                         adjustedMap.push({
  52.                                           datasetIndex: datasetIndex,
  53.                                           dataIndex: dataIndex
  54.                                         });
  55.                                       }
  56.                                     });
  57.                                   }
  58.                                 }
  59.                             }
  60.                         }
  61.                     }
  63.                     Chart.pluginService.register(jitterEffectPlugin);
展开查看全部
赞(0）分享  回复(0）举报  2023-03-18
ej83mcc0

ej83mcc03#

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

  1. var jitterEffectsPlugin = {
  2.     id: 'jitterEffects',
  3.     beforeDatasetDraw: function (ctx, args) {
  4.         var _args = args,
  5.             dataIndex = _args.index,
  6.             meta = _args.meta;
  7.         var points = meta.data.map(function (el) {
  8.             return {
  9.                 x: el.x,
  10.                 y: el.y
  11.             };
  12.         });
  13.         var dsLength = ctx.data.datasets.length;
  14.         var adjustedMap = []; // keeps track of adjustments to prevent double offsets
  16.         for (var datasetIndex = 0; datasetIndex < dsLength; datasetIndex += 1) {
  17.             if (dataIndex !== datasetIndex) {
  18.                 var datasetMeta = ctx.getDatasetMeta(datasetIndex);
  19.                 datasetMeta.data.forEach(function (el) {
  20.                     var overlapFilter = points.filter(function (point) {
  21.                         return point.x === el.x && point.y === el.y;
  22.                     });
  24.                     var overlap = false;
  25.                     var overObj = JSON.parse(JSON.stringify(overlapFilter));
  26.                     for (var i = 0; i < overObj.length; i++) {
  27.                         if(overObj[i]['x'] === el.x && overObj[i]['y'] === el.y){
  28.                             overlap = true;
  29.                             break;
  30.                         }
  31.                     }
  32.                     if (overlap) {
  33.                         var adjusted = false;
  34.                         var adjustedFilter = adjustedMap.filter(function (item) {
  35.                             return item.datasetIndex === datasetIndex && item.dataIndex === dataIndex;
  36.                         });
  37.                         var adjObj = JSON.parse(JSON.stringify(adjustedFilter));
  38.                         for (var i = 0; i < adjObj.length; i++) {
  39.                             if(adjObj[i]['datasetIndex'] === datasetIndex && adjObj[i]['dataIndex'] === dataIndex){
  40.                                 adjusted = true;
  41.                                 break;
  42.                             }
  43.                         }
  45.                         if (!adjusted && datasetIndex % 2) {
  46.                             el.x += 7;
  47.                         } else {
  48.                             el.x -= 7;
  49.                         }
  51.                         adjustedMap.push({
  52.                             datasetIndex: datasetIndex,
  53.                             dataIndex: dataIndex
  54.                         });
  55.                     }
  56.                 });
  57.             }
  58.         }
  59.     }
  60. }
展开查看全部
赞(0）分享  回复(0）举报  2023-03-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com