React使用AnyChart股票K线图触发tooltip时图表消失问题

问题根因 #

• 你将图表实例创建、异步数据请求逻辑全部放在了render()方法中，React组件触发任意重渲染（tooltip渲染、状态变更等）都会重新执行render逻辑，重复创建chart实例、重复发起数据请求，直接覆盖原有渲染实例，就会出现悬浮后图表销毁、tooltip不生效的异常。
• AnyChart 股票图（anychart.stock()）的tooltip默认绑定在绘图区plot层级，仅配置全局chart.tooltip()的参数不会生效。

修复步骤 #

1. 将图表初始化、数据加载逻辑移到componentDidMount生命周期中，仅在组件挂载完成后初始化一次实例，存在组件state中避免重复创建
2. 调整tooltip配置层级，针对plot单独配置tooltip参数
3. 保证数据异步加载完成后再触发图表渲染

修复后完整代码 #

import AnyChart from 'anychart-react'
import anychart from 'anychart'
import { Component } from 'react'

export default class Chart extends Component {
  state = {
    chartInstance: null
  }

  componentDidMount() {
    const coinId = this.props.location.state.coinId.id
    const coinName = this.props.location.state.coinName.name

    // 仅初始化一次图表实例
    const chart = anychart.stock();
    // 图表背景色
    chart.background().fill("#282c34");

    // 加载JSON数据并处理
    anychart.data.loadJsonFile("https://api.coingecko.com/api/v3/coins/" + coinId + "/ohlc?vs_currency=usd&days=max", 
    (data) => {
      // 创建数据表
      const dataTable = anychart.data.table(0, 'MMM d, yyyy');
      dataTable.addData(data);
      // 映射数据
      const mapping = dataTable.mapAs({ 'open': 1, 'high': 2, 'low': 3, 'close': 4 });
      // 设置序列
      const series = chart.plot(0).candlestick(mapping);
      // 设置序列名称
      series.name(coinName + " Price Data");
      // 设置图表标题
      chart.title(coinName + " Price Data");
      // 获取绘图区域
      const plot = chart.plot(0);
      
      // 【关键】stock图tooltip需配置在plot层级
      plot.tooltip().positionMode('float');
      plot.tooltip().anchor("bottomLeft");
      
      // 创建周期为20的EMA（指数移动平均线）指标
      const ema20 = plot.ema(mapping, 20).series();
      // 设置EMA线条颜色
      ema20.stroke('1, white');
      // 禁用滚动条轴
      chart.scroller().xAxis(false);
      // 为滚动条映射open值
      const openValue = dataTable.mapAs();
      openValue.addField('value', 2);
      // 用映射后的数据创建滚动条序列
      chart.scroller().column(openValue);

      // 数据加载配置完成后再将实例存入state触发渲染
      this.setState({ chartInstance: chart })
    })
  }

  render() {
    // 仅当实例准备完成后才渲染图表
    return this.state.chartInstance ? <AnyChart
      width={'100%'}
      height={900}
      instance={this.state.chartInstance}
    /> : null
  }
}

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