在 Google Charts 中包含带有 MathJax 的 LaTeX 符号？

在生成的树形图中谷歌图表 https://developers.google.com/chart/interactive/docs/gallery/orgchart我想包含使用 MathJax 生成的 LaTeX 符号。使用通常在 HTML 文件中起作用的 $ $ 命令，我无法在图表本身的 javascript 代码中重现这些符号。有什么办法可以做到这一点吗？

下面的 jsfiddle 总结了一切：http://jsfiddle.net/jqzup01b/ http://jsfiddle.net/jqzup01b/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
MatchWebFonts: {
    matchFor: {
      "HTML-CSS": true,
      NativeMML: false,
      SVG: false
    },
    fontCheckDelay: 2000,
    fontCheckTimeout: 30 * 1000
  },


jax: ["input/TeX","output/HTML-CSS"],
  "HTML-CSS": { linebreaks: { automatic: true },  matchFontHeight: true, scale: 90 },
         SVG: { linebreaks: { automatic: true }, matchFontHeight: true},
    tex2jax: {inlineMath: [['$','$']]}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["orgchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
          [{v:'Mike', f:'One<div style="color:grey; font-style:italic" w></div>'}, '', ''],
          [{v:'Jim', f:'Two<div style="color:grey; font-style:italic; background: white; width: 100px;">$can i haz LaTeX here$<div>'}, 'Mike', ''],
          [{v:'Alice', f:'Three<div style="color:grey; font-style:italic">$\in$<div>'}, 'Mike', '']

        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_span'));
        chart.draw(data, {allowHtml:true});
      }

</script>

    This is not LaTeX.<br>
    $\int ( This \, is).$

    <span id="chart_span">  
</span>

由于图表将异步加载，因此当图表到达时，MathJax 的初始排版过程已经结束。

因此，您需要通过添加来触发另一个排版调用（它将查找新内容）

        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

to your drawChart函数，请参阅下面的代码片段和MathJax 文档了解更多信息 http://docs.mathjax.org/en/latest/typeset.html.

PS：请记住，JavaScript 中的 TeX 字符串需要大量转义，例如，\\in.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
MatchWebFonts: {
    matchFor: {
      "HTML-CSS": true,
      NativeMML: false,
      SVG: false
    },
    fontCheckDelay: 2000,
    fontCheckTimeout: 30 * 1000
  },


jax: ["input/TeX","output/HTML-CSS"],
  "HTML-CSS": { linebreaks: { automatic: true },  matchFontHeight: true, scale: 90 },
         SVG: { linebreaks: { automatic: true }, matchFontHeight: true},
	tex2jax: {inlineMath: [['$','$']]}
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["orgchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
          [{v:'Mike', f:'One<div style="color:grey; font-style:italic" w></div>'}, '', ''],
          [{v:'Jim', f:'Two<div style="color:grey; font-style:italic; background: white; width: 100px;">$can i haz LaTeX here$<div>'}, 'Mike', ''],
          [{v:'Alice', f:'Three<div style="color:grey; font-style:italic">$\in$<div>'}, 'Mike', '']
    
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_span'));
        chart.draw(data, {allowHtml:true});
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
      }
    
</script>
    
    This is not LaTeX.<br>
    $\int ( This \, is).$
    
    <span id="chart_span">  
</span>