Google图表-HTML轴标签和标题

aduss 发表于 Dev

忠告

所以我正在尝试在Google图表中创建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);
});

基于下面的答案（谢谢！），以及我实际上在做什么，我使用_ {}和^ {}而不是<sub>和<sup>编写了以下一般规则

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

白帽

标签只会接受文字...

使用绘制图表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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。