Question

所以我想在谷歌图表中制作html轴标签。但是，似乎没有任何支持将轴标签或标题创建为HTML对象。标题很容易修复，只需将其作为单独的HTML对象添加到页面中，但轴标签更具挑战性。有没有人能够做到这一点？作为示例，下面的jsfiddle应该显示当您尝试使用简单的sub和sup 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);
});

基于以下答案（谢谢！），以及我实际在做什么，我使用_ {}和^ {}而不是＆lt;写了以下一般规则： sub>和＆lt; sup＆gt;

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>元素
要内联更改字体样式，请使用<tspan>

中的svg <text>元素

e.g。

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

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

<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>

＆＃13;

Google图表 - HTML轴标签和标题

1 个答案: