ApexCharts 的 tooltip 怎么只显示部分数据？

欧阳佳宁提问于 2026-03-01 17:48:21 阅读 20

交互

我在用 ApexCharts 做一个折线图，但 tooltip 里只显示了第一个系列的数据，其他系列的值都没出来。明明 chart 配置里有三个 series，但鼠标悬停时 tooltip 只展示一个，这是哪配错了？

我试过把 tooltip 的 shared 设成 true，也检查了数据格式，看起来没问题啊……

<div id="chart"></div>
<script>
  new ApexCharts(document.querySelector("#chart"), {
    series: [
      { name: 'A', data: [30, 40, 35] },
      { name: 'B', data: [20, 30, 25] },
      { name: 'C', data: [10, 15, 20] }
    ],
    chart: { type: 'line', height: 300 },
    tooltip: { shared: true }
  }).render();
</script>

图表可视化

我来解答赞 4 收藏

反馈

1 条解答

极客培静 Lv1

你这个问题，shared: true 配对了，但漏了个关键配置。加上 intersect: false 就行了，默认是 true，导致 tooltip 只在数据点交叉时触发。

tooltip: { 

  shared: true,

  intersect: false

}

另外建议把 xaxis 也配上，不然横轴没刻度看着也难受。

2026-03-01 18:00