如何在uplot-vue图表中通过右键菜单获取对应数据？

问题原因 #

右键点击图表时，uplot的cursor并未自动定位到点击位置，此时cursor.idxs还未被初始化，直接访问会抛出TypeError。

解决方案 #

通过手动将鼠标点击坐标转换为uplot内部坐标，计算对应的数据索引，或手动触发cursor定位来获取数据。以下是两种可行的实现方式：

方式一：直接计算点击位置的x轴索引 #

通过valToIdx方法将点击坐标转换为数据索引，再从原始数据中提取对应特征的详细信息：

<template>
  <uPlot ref="uplotRef" :options="chartOptions" :data="chartData" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import uPlot from 'uplot'

const uplotRef = ref(null)
// 图表配置（示例）
const chartOptions = ref({
  axes: [
    { label: '时间' },
    { label: '速度', side: 1 }
  ],
  series: [
    { label: '时间' },
    { label: '特征1' },
    { label: '特征2' },
    { label: '特征3' },
    { label: '特征4' },
    { label: '特征5' }
  ],
  // 其他配置如width、height等
})
// 示例数据：第一个数组是时间轴，后续是5个特征数据
const chartData = ref([
  [1620000000, 1620003600, 1620007200],
  [10, 12, 15],
  [8, 9, 11],
  [15, 17, 20],
  [5, 7, 6],
  [20, 22, 25]
])

onMounted(() => {
  const uplotInst = uplotRef.value.uPlot
  // 监听右键菜单事件
  uplotInst.root.addEventListener('contextmenu', (e) => {
    e.preventDefault() // 阻止系统默认右键菜单

    // 转换鼠标坐标为uplot容器内的相对坐标
    const containerRect = uplotInst.root.getBoundingClientRect()
    const relX = e.clientX - containerRect.left
    const relY = e.clientY - containerRect.top

    // 获取点击位置对应的x轴数据索引
    const xIdx = uplotInst.valToIdx(relX, 'x')
    
    if (xIdx !== null) {
      // 提取所有特征的详细数据
      const detailInfo = chartOptions.value.series.slice(1).map((series, idx) => {
        const seriesIdx = idx + 1
        return {
          featureName: series.label,
          time: chartData.value[0][xIdx],
          speed: chartData.value[seriesIdx][xIdx]
        }
      })

      // 此处替换为你的弹窗逻辑，展示详细数据
      console.log('特征详细数据:', detailInfo)
    }
  })
})
</script>

方式二：手动触发cursor定位 #

通过cursor.set方法将cursor定位到点击位置，此时cursor.idxs会被初始化，可直接获取索引：

// 在contextmenu事件处理函数内替换坐标计算部分：
uplotInst.cursor.set({ left: relX, top: relY })
const cursorIdxs = uplotInst.cursor.idxs

if (cursorIdxs?.x !== undefined) {
  const xIdx = cursorIdxs.x
  // 后续数据提取逻辑同方式一
}

注意事项 #

• 必须在组件挂载完成后（onMounted钩子）操作uplot实例，确保实例已初始化。
• valToIdx方法的第二个参数为轴的标识，若你的x轴配置了自定义id，需替换为对应值。
• 若存在多个y轴，可通过valToIdx结合y轴标识获取对应y值的索引，或直接通过x索引从数据数组中提取。

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