所以我想在谷歌图表中制作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: 'Xm versus X2',
//best guess, does nothing
titleTextStyle: {isHtml: true},
hAxis: {title: 'Xm'},
vAxis: {title: 'X2'}
};
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