HighchartsReact加载时短暂显示默认‘Chart Title’的解决咨询

问题场景 #

在React项目中使用highcharts-react-official组件，通过axios请求服务端预生成的Highcharts配置渲染图表。尽管本地请求延迟仅24ms，但页面初始化时会短暂显示Highcharts默认的"Chart Title"，随后才替换为配置中的标题，出现明显闪烁。硬编码配置时无此问题，尝试设置空标题初始状态未生效。

组件代码如下：

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Highcharts from 'highcharts'; 
import HighchartsReact from 'highcharts-react-official'; 

const Chart = ({url}) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get(url).then(json => setData(json.data.options))
  }, [url])
  
  return <HighchartsReact containerProps={{ style: { height: '90%' } }} highcharts={Highcharts} options={data} />;
  
} 

export default Chart;

可行解决方案 #

1. 延迟渲染组件，直到配置加载完成 #

初始将data设为null，仅当配置请求完成后再渲染Highcharts组件，避免初始渲染默认配置。同时可添加加载占位提升体验：

const Chart = ({url}) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get(url).then(json => setData(json.data.options))
  }, [url])
  
  if (!data) {
    // 可替换为自定义加载组件
    return <div style={{ height: '90%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>加载中...</div>;
  }
  
  return <HighchartsReact containerProps={{ style: { height: '90%' } }} highcharts={Highcharts} options={data} />;
}

2. 初始化配置时设置空标题（修正初始状态类型） #

之前初始状态设为数组[]，Highcharts会默认使用内置配置。改为初始化一个包含空标题的配置对象，覆盖默认标题：

const Chart = ({url}) => {
  // 初始化空标题配置，避免默认标题显示
  const [data, setData] = useState({
    title: { text: '' },
    chart: { animation: false } // 保持无动画
  });

  useEffect(() => {
    axios.get(url).then(json => setData(json.data.options))
  }, [url])
  
  return <HighchartsReact containerProps={{ style: { height: '90%' } }} highcharts={Highcharts} options={data} />;
}

3. 确保禁用图表初始动画 #

确认服务端返回的配置中chart.animation设为false，同时组件初始化配置也保持该设置，避免标题切换时的动画闪烁（已在上述方案中包含）。

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