在Google Charts中包含MathJax的LaTeX符号？ [英] Including LaTeX symbols with MathJax inside Google Charts?
本文介绍了在Google Charts中包含MathJax的LaTeX符号？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在使用 Google图表生成的树状图中，我希望包括用MathJax生成的LaTeX符号。使用通常在我的HTML文件中工作的$ $命令，我无法在图表本身的JavaScript代码中重现这些符号。有没有办法做到这一点？
以下jsfiddle总结了一切： http：// jsfiddle .net / jqzup01b / $ b
< script src =http://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascriptsrc =../ 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 / javascriptsrc =http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML> < /脚本>
< script type =text / javascript>
google.load（visualization，1，{packages：[orgchart]}）;
google.setOnLoadCallback（drawChart）;
函数drawChart（）{
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Name'）;
data.addColumn（'string'，'经理'）;
data.addColumn（'string'，'ToolTip'）;
data.addRows（[
[{v：'Mike'，f：'One< div style =color：gray; font-style：italicw>< / div> ;'}，''，'']，
[{v：'Jim'，f：'两个< div style =color：gray; font-style：italic; background：white; width：100px; > $我可以在这里的LaTeX $< 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>
这不是LaTeX。< br>
$ \int（This \，is）。
< span id =chart_span>
< / span>
解决方案
由于图表将被异步加载，MathJax的初始排版通过已经在图表到达时结束。
因此，您需要触发另一个排版调用（它将查找新内容），方法是添加
MathJax.Hub.Queue（[Typeset，MathJax.Hub]）;
添加到您的 drawChart 函数中，请参阅代码段以及 MathJax文档以获取更多信息。
PS：请记住，JavaScript中的TeX字符串需要大量转义，例如 \\in 。
< script src =http://ajax.googleapis.com/ajax/libs/jquery/ 2.1.1 / jquery.min.js>< / script>< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script><< ; script type =text / javascriptsrc =../ 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} ：{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）;函数drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Name'）; data.addColumn（'string'，'经理'）; data.addColumn（'string'，'ToolTip'）; data.addRows（[[{v：'Mike'，f：'One< div style =color：grey; font-style：italicw>< / div>}，''，'']，[ {v：'Jim'，f：'两个< div style =color：gray; font-style：italic; background：white; width：100px;> $我可以在这里使用LaTeX $< 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（[ 排版，MathJax.Hub]）; }< / script>这不是LaTeX。< br> $ \int（This \，is）。$< span id =chart_span> < /跨度>
Within a tree diagram generated with Google Charts I would like to include LaTeX symbols generated with MathJax. Using the $ $ command that normally works throughout my HTML file, I am unable to reproduce these symbols within the javascript code of the diagram itself. Is there any way to do this?
The following jsfiddle sums it all up: 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>
解决方案
Since the chart will be loaded asynchronously, MathJax's initial typesetting pass will already be over by the time the chart arrives.
So you need to trigger another typesetting call (which will look for new content) by adding
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
to your drawChart function, see the snippet below and the MathJax documentation for more.
PS: Keep in mind that TeX strings in JavaScript need lots of escaping, e.g, \\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>
这篇关于在Google Charts中包含MathJax的LaTeX符号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
