如何在回调函数中获取图表不可见序列的对应数据值

你之前使用visibility配置拿不到值是正常现象：绝大多数图表库会将标记为隐藏的序列完全排除在交互链路之外，相关数据不会注入到回调参数中，因此无法读取对应值。
推荐优先使用自定义数据字段绑定方案，不需要新增额外的隐藏序列，也能稳定拿到Index值，适配所有主流图表库：

ECharts 实现示例 #

• 处理CSV数据时，将Index绑定到可见的Value序列的每个数据项的自定义属性中：

// 解析后的CSV原始数据
const rawData = [
  {Index:0, Time:'2021/7/30 16:25:09.408', Value:-74.63},
  {Index:1, Time:'2021/7/30 16:25:09.421', Value:-75.25},
  {Index:2, Time:'2021/7/30 16:25:09.621', Value:-76.13},
  {Index:3, Time:'2021/7/30 16:25:09.821', Value:-76.19}
]
// 构造series时仅保留可见的Value序列，附加自定义Index字段
const seriesData = rawData.map(item => ({
  value: [item.Time, item.Value],
  customIndex: item.Index
}))

• 点击事件回调中直接读取自定义属性：

myChart.on('click', function(params) {
  const targetIndex = params.data.customIndex
  // 后续处理逻辑
})

Highcharts 实现示例 #

// 序列配置
series: [{
  type: 'line',
  name: '数值',
  data: rawData.map(item => ({
    x: new Date(item.Time).getTime(),
    y: item.Value,
    customIndex: item.Index
  }))
}]
// 点击回调配置
plotOptions: {
  series: {
    point: {
      events: {
        click: function () {
          const targetIndex = this.customIndex
          // 后续处理逻辑
        }
      }
    }
  }
}

特殊场景兼容（必须新增额外Index序列的情况） #

如果业务逻辑要求必须将Index作为独立序列维护，不要使用visibility: false配置，改为以下属性组合实现隐藏且可读取数据：

• showInLegend: false：不在图例中展示
• enableMouseTracking: false：不响应单独的鼠标交互
• opacity: 0：完全透明不可见
  配置后Index序列不会在界面上渲染，但数据仍会保留在全局回调的参数中可正常读取。

内容的提问来源于stack exchange，提问作者li.huang