如何将图表Label显示为LaTeX数学公式？

原本以为将图表label放在$或$$之间就能用MathJax渲染LaTeX数学公式，但实际没有效果。

示例效果截图：

我的图表Label代码（Chart.js配置）：

var config =
    { type: 'line'
    , data:
        { datasets:
            [ 
              { label: "$$e(x)$$"
              , data: data_e_x
              }
            ]
        }
    // 其他配置省略
    };

已在HTML中引入MathJax：

<html>
<head>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<!-- 其他内容省略 -->
</html>

测试了$和$$两种包裹方式都无效，求解决办法。

Chart.js不会自动识别并渲染label中的MathJax语法，需要手动触发MathJax对图表label元素的渲染，或者通过Chart.js的回调函数自定义label的渲染方式，具体有两种方案：

方案1：图表渲染完成后手动触发MathJax更新 #

在图表初始化完成后，调用MathJax的typeset()方法，让它扫描页面中的公式并渲染。示例代码：

// 初始化图表
var myChart = new Chart(document.getElementById('myChart'), config);

// 图表渲染完成后触发MathJax渲染
myChart.rendered.then(function() {
    MathJax.typeset();
});

如果是旧版Chart.js（没有renderedPromise），可以用setTimeout延迟触发：

var myChart = new Chart(document.getElementById('myChart'), config);
setTimeout(function() {
    MathJax.typeset();
}, 100);

方案2：使用Chart.js的回调函数自定义label渲染 #

通过Chart.js的options.plugins.legend.labels.generateLabels回调，直接生成包含MathJax渲染后的HTML元素。示例：

var config = {
    type: 'line',
    data: {
        datasets: [
            { label: "e(x)", data: data_e_x } // 这里直接写LaTeX内容，无需加$包裹
        ]
    },
    options: {
        plugins: {
            legend: {
                labels: {
                    generateLabels: function(chart) {
                        return chart.data.datasets.map(function(dataset, index) {
                            // 用MathJax把LaTeX转换成可渲染的HTML
                            var labelHtml = MathJax.tex2chtml(dataset.label).outerHTML;
                            return {
                                text: '', // 清空默认文本
                                html: labelHtml, // 使用渲染后的HTML作为label
                                fillStyle: dataset.backgroundColor,
                                strokeStyle: dataset.borderColor,
                                lineWidth: dataset.borderWidth
                            };
                        });
                    }
                }
            }
        }
    }
};

注意：使用这个方案需要确保MathJax支持tex2chtml方法，建议替换为新版MathJax CDN：

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

额外注意事项 #

• 旧版cdn.mathjax.org已停止维护，优先使用新版CDN链接；
• 如果是坐标轴的label（而非图例label），可通过options.scales.x.title.callback或options.scales.y.title.callback类似的回调处理，原理与图例label一致。

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