Charts 谷歌图表-HTML轴标签和标题

所以我尝试在谷歌图表中制作html轴标签。但是，似乎不支持将轴标签或标题创建为HTML对象。标题很容易修复，只需将其作为单独的HTML对象添加到页面中，但axis标签更具挑战性。有人能做到这一点吗？作为一个例子，下面的JSFIDLE应该显示当您尝试使用简单的sub和sup html标记时会发生什么

基于以下答案，谢谢！，我实际上在做的是，我用{}和^{}而不是和写了下面的一般规则

---

标签将只接受文本

图表是用svg绘制的，当“就绪”事件触发时，可以手动更改svg

标签将是元素 要内联更改字体样式，请在中使用svg元素

e、 g

<text>X<tspan baseline-shift="super">m</tspan></text>

请参阅以下工作片段

google.charts.load'current'{ 回调函数{ 变量数据=['X'，'Y']]，i，选项， 图表、数据表； 对于i=0；i<20；i+=1{ 数据推送[i，i*i]； } dataTable=google.visualization.arrayToDataTabledata； 选项={ 图例：“无”， 标题：“Xm对X2”， hAxis:{title:'Xm'}， 变量：{title:'X2'} }; chart=新的google.visualization.ScatterChartdocument.getElementById'chart_div'； google.visualization.events.addListenerchart“就绪”，函数{ $。每个$'text'，函数索引，标签{ var labelText=$label.text； 如果labelText.indexOf'X'>-1{ labelText=labelText.replacenew RegExp/m/g，“m”； labelText=labelText.replacenew RegExp/2/g，“2”； $label.htmllabelText； } }; }; chart.drawdataTable，选项； }, 软件包：['corechart'] };

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(function () {
    var data = [['X','Y']], i, options, 
        chart, dataTable;
    for (i = 0; i < 20; i += 1) {
    data.push([i, i * i]);
    }
    dataTable =
    google.visualization.arrayToDataTable(data);

  options = {
        legend: 'none',
    title: 'X_{m} versus X^2',
        hAxis: {title: 'X_m'},
    vAxis: {title: 'X^{2}'}
    };

  chart = new 
    google.visualization.ScatterChart(document.body);

    google.visualization.events.addListener(chart, 'ready', function () {
      $.each($('text'), function (index, label) {
        var labelText = $(label).text();
        if (labelText.match(/_|\^/)) {
                    labelText = labelText.replace(/_([^\{])|_\{([^\}]*)\}/g, '<tspan style="font-size: smaller;" baseline-shift="sub">$1$2</tspan>')
                    labelText = labelText.replace(/\^([^\{])|\^\{([^\}]*)\}/g, '<tspan style="font-size: smaller;" baseline-shift="super">$1$2</tspan>')
          $(label).html(labelText);
        }
      });
    });

  chart.draw(dataTable, options);
});

<text>X<tspan baseline-shift="super">m</tspan></text>