如何在AnyChart股票图表中将tooltip设置为separated独立显示模式

算力阿峰

2026-10-5

问题原因

AnyChart Stock 图表的 separated tooltip 显示模式为单系列独立渲染逻辑，和默认的union合并模式有两个核心配置差异：

该模式下全局图表层级的titleFormat配置不生效，标题需要配置到对应系列的tooltip上
必须显式开启对应绘图区（plot）和所有系列的tooltip开关，否则会出现tooltip完全不渲染的问题

修复代码

你只需要调整tooltip相关配置即可，修改后代码如下：

const [ma, setMa] = useState([])

const table = anychart.data.table()
table.addData(dStock)

const mapping = table.mapAs()
mapping.addField(`open`, 1)
mapping.addField(`high`, 2)
mapping.addField(`low`, 3)
mapping.addField(`close`, 4)

const chart = anychart.stock()
const ticker = `サンプル`

const tooltip = chart.tooltip()
tooltip.displayMode(`separated`) // 放开这行配置即可
tooltip.enabled(true) // 显式开启全局tooltip

const series = chart.plot(0).candlestick(mapping)
series.name(ticker)
// 把原来的全局titleFormat移到蜡烛图系列的tooltip配置中
const candleTooltip = series.tooltip()
candleTooltip.titleFormat(ticker)
candleTooltip.format(`\n始値：{%open}\n高値：{%high}\n安値：{%low}\n終値：{%close}`)
candleTooltip.enabled(true)

// 显式开启绘图区tooltip，避免层级配置覆盖导致失效
chart.plot(0).tooltip().enabled(true)

const s = []

if (ma.length > 0) {
  ma.forEach((v, k) => {
    const key = Object.keys(v)[0]
    s[k] = chart.plot(0).line(v[key])
    s[k].name(key)
    const lineTooltip = s[k].tooltip()
    lineTooltip.format(`{%seriesName}: {%value}`)
    lineTooltip.enabled(true) // 确保均线系列tooltip开启
  })
}