React集成AnyChart时容器设置无效报错的原因排查

1. DOM容器未就绪时执行图表绘制：你在constructor中调用chart.draw()，但此时React还未渲染出指定id的<div>容器，AnyChart找不到目标容器，因此抛出Container is not set or can not be properly recognized错误。
2. 两种渲染方式冲突：你同时使用了chart.container(props.containerId)手动指定容器，又通过<AnyChart>组件渲染图表。<AnyChart>组件内部会自动创建id="ac-chart-container"的容器，导致你自定义的容器被忽略。

提供两种正确的实现方式，二选一即可：

方式一：使用<AnyChart>组件（推荐） #

利用官方React组件的特性，无需手动指定容器和调用draw()，组件会自动处理DOM渲染：

class SunburstAnyChart extends React.Component {
  constructor(props) {
    super(props);
    // 仅初始化图表配置，不调用draw()
    let dataTree = anychart.data.tree(data, "as-table");
    let chart = anychart.sunburst(dataTree);

    chart.calculationMode("parent-independent");
    chart.title("Europe Population");
    chart.palette(["#0288d1", "#d4e157", "#ff6e40", "#f8bbd0"]);
    chart.labels().format("{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}");
    chart.tooltip().format("Population: {%Value}{scale:(1000000)(1)|( mln)}");
    chart.fill(function () {
      return anychart.color.darken(this.parentColor, 0.15);
    });

    this.state = { chart };
  }

  render() {
    // 直接将图表实例传给AnyChart组件，无需额外指定容器id
    return <AnyChart instance={this.state.chart} title="" />;
  }
}

export default SunburstAnyChart;

方式二：手动指定容器渲染 #

如果不想用<AnyChart>组件，可在组件挂载后手动渲染到自定义容器：

class SunburstAnyChart extends React.Component {
  componentDidMount() {
    // 组件挂载后，DOM容器已存在，此时初始化并绘制图表
    let dataTree = anychart.data.tree(data, "as-table");
    let chart = anychart.sunburst(dataTree);

    chart.calculationMode("parent-independent");
    chart.title("Europe Population");
    chart.palette(["#0288d1", "#d4e157", "#ff6e40", "#f8bbd0"]);
    chart.labels().format("{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}");
    chart.tooltip().format("Population: {%Value}{scale:(1000000)(1)|( mln)}");
    chart.fill(function () {
      return anychart.color.darken(this.parentColor, 0.15);
    });

    // 指定容器并绘制
    chart.container(this.props.containerId);
    chart.draw();
    // 保存实例以便后续更新或销毁
    this.chartInstance = chart;
  }

  componentWillUnmount() {
    // 组件卸载时销毁图表，避免内存泄漏
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  }

  render() {
    return <div id={this.props.containerId} />;
  }
}

export default SunburstAnyChart;

• 类组件中，图表初始化和绘制逻辑必须放在componentDidMount中，确保DOM容器已渲染完成。
• 不要混合使用<AnyChart>组件和手动container()+draw()的方式，二者选其一。
• 组件卸载时记得调用dispose()销毁图表，避免内存泄漏。

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