Googleグラフ - HTML軸のラベルとタイトル

Question

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

、そして私が実際にやっている、私の代わりに<サブ} {_ {}を使用して、このため、次の一般的なルールを書き、^>そして< 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); 
}); 

Answer 1

ラベルはテキストだけを受け入れます...

チャートを場合'ready'イベントが発生

ラベルが<text>

内SVG <tspan>要素を使用し、フォントスタイルをインラインで変更する<text>要素
になり、手動で変更することができるsvg、で描かれています例えば

が作業スニペットを次のように表示

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