html标题图表,谷歌图表 - HTML轴标签和标题

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

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²',

//best guess, does nothing

titleTextStyle: {isHtml: true},

hAxis: {title: 'X_m'},

vAxis: {title: 'X²'}

};

chart = new

google.visualization.ScatterChart(document.body);

chart.draw(dataTable, options);

});

基于下面的答案(谢谢！)，什么我实际上做的，我写了下面的一般规则此使用_ {}和^ {}代替和< SUP>

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, '$1$2')

labelText = labelText.replace(/\^([^\{])|\^\{([^\}]*)\}/g, '$1$2')

$(label).html(labelText);

}

});

});

chart.draw(dataTable, options);

});

2017-06-26

aduss