ZingChart JS折线图重叠点处理：悬停仅显示单个系列值问题

以下是几种实用的解决思路：

1. 开启共享Tooltip模式 #

这是最简便的方案，ZingChart原生支持共享Tooltip，开启后鼠标悬停时会自动展示所有系列在当前x轴位置的数值，无论点是否重合。

配置示例：

zingchart.render({
  id: 'myChart',
  data: {
    tooltip: {
      shared: true, // 开启共享模式
      crosshairX: true // 可选，显示x轴十字线，提升交互体验
    },
    series: [
      { values: [10, 20, 30, 40] },
      { values: [10, 20, 30, 40] } // 与第一个系列完全重合
    ]
  }
});

2. 自定义Tooltip内容 #

如果需要更灵活的Tooltip样式或逻辑，可以通过自定义html函数来手动收集并展示所有重合点的数据。

配置示例：

zingchart.render({
  id: 'myChart',
  data: {
    tooltip: {
      html: function(p) {
        let tooltipContent = `<div class="zc-tooltip"><strong>X: ${p.x}</strong><br>`;
        // 遍历所有系列，筛选出当前x轴位置的数值
        p.series.forEach(series => {
          const pointValue = series.values[p.index];
          tooltipContent += `<div>${series.text}: ${pointValue}</div>`;
        });
        tooltipContent += '</div>';
        return tooltipContent;
      }
    },
    series: [
      { text: '系列A', values: [10, 20, 30, 40] },
      { text: '系列B', values: [10, 20, 30, 40] }
    ]
  }
});

3. 给重合点添加微小偏移 #

如果希望能分别 hover 到单个系列的点，可以给其中一个系列的数据点添加极小的数值或像素偏移，视觉上几乎无差别，但能让Tooltip分别触发。

数值偏移示例： #

// 给系列B的每个值添加0.01的偏移，视觉上基本看不出差别
const seriesBValues = [10, 20, 30, 40].map(val => val + 0.01);

zingchart.render({
  id: 'myChart',
  data: {
    series: [
      { text: '系列A', values: [10, 20, 30, 40] },
      { text: '系列B', values: seriesBValues }
    ]
  }
});

像素偏移示例： #

zingchart.render({
  id: 'myChart',
  data: {
    series: [
      { text: '系列A', values: [10, 20, 30, 40] },
      { text: '系列B', values: [10, 20, 30, 40], plot: { offsetX: 2 } } // x轴偏移2像素
    ]
  }
});

内容的提问来源于stack exchange，提问作者developer