charts - Google Charts - HTML 轴标签和标题

Question

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

https://jsfiddle.net/jqmya8j9/1/

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<sub>m</sub> versus X<sup>2</sup>',

      //best guess, does nothing
      titleTextStyle: {isHtml: true},

      hAxis: {title: 'X<sub>m</sub>'},
      vAxis: {title: 'X<sup>2</sup>'}
    };

  chart = new 
    google.visualization.ScatterChart(document.body);
  chart.draw(dataTable, options);
});

根据下面的答案(谢谢!)以及我实际正在做的事情，我使用 _{} 和 ^{} 而不是 < sub > 和 ^{编写了以下一般规则}

https://jsfiddle.net/jqmya8j9/2/

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);
});

Answer 1

标签只接受文本...

图表是用 svg 绘制的，当 'ready' 时可以手动更改。事件触发

标签将为<text>元素
要更改内联字体样式，请使用 svg <tspan> <text> 内的元素

例如

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

---

请参阅以下工作片段...

google.charts.load('current', {
  callback: 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: 'Xm versus X2',
      hAxis: {title: 'Xm'},
      vAxis: {title: 'X2'}
    };

    chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      $.each($('text'), function (index, label) {
        var labelText = $(label).text();
        if (labelText.indexOf('X') > -1) {
          labelText = labelText.replace(new RegExp(/m/g), '<tspan baseline-shift="super">m</tspan>');
          labelText = labelText.replace(new RegExp(/2/g), '<tspan baseline-shift="super">2</tspan>');
          $(label).html(labelText);
        }
      });
    });

    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>