React Highcharts：如何渲染含动态文本与HTML样式的图表标题

你的问题出在直接将模板字符串语法写在了引号包裹的静态文本里，Highcharts 不会解析字符串内部的 ${} 变量占位符。以下是几种可行的解决方法：

方法一：预拼接 HTML 字符串 #

先将包含变量的 HTML 内容拼接完成，再赋值给 title.text：

// 提前拼接好带日期变量的 HTML 结构
const titleContent = `<div>
    <div>Water Consumption by Day of Week</div>
    <div>${startDate} - ${endDate}</div>
</div>`;

Highcharts.chart('container', {
    title: {
        text: titleContent,
        useHTML: true
    },
    // 其他图表配置项...
});

方法二：通过图表加载事件动态设置标题 #

如果日期变量是异步获取的，可在图表加载完成后动态更新标题：

Highcharts.chart('container', {
    title: {
        useHTML: true,
        text: '' // 初始设为空
    },
    chart: {
        events: {
            load: function() {
                this.setTitle({
                    text: `<div>
                        <div>Water Consumption by Day of Week</div>
                        <div>${startDate} - ${endDate}</div>
                    </div>`
                });
            }
        }
    },
    // 其他图表配置项...
});

方法三：框架环境下的特殊处理（如 React） #

如果你使用 highcharts-react-official 组件，可以直接通过 JSX 渲染标题：

import HighchartsReact from 'highcharts-react-official';

const ChartComponent = ({ startDate, endDate }) => {
    const renderCustomTitle = () => (
        <div>
            <div>Water Consumption by Day of Week</div>
            <div>{startDate} - {endDate}</div>
        </div>
    );

    const chartOptions = {
        title: {
            useHTML: true,
            text: ''
        },
        // 其他图表配置项...
    };

    return (
        <HighchartsReact 
            highcharts={Highcharts} 
            options={chartOptions} 
            title={renderCustomTitle()} 
        />
    );
};

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