我在我的应用程序中使用highcharts来显示数学计算和电子术语所以我需要在highcharts Xaxis标题和Yaxis标题上以上标和下标的形式显示elctrical term我没有尝试过但是我没有得到任何soln html sub和sup标签都没有在那里工作,请给我任何适当的解决方案。
答案 0 :(得分:10)
考虑使用useHTML
property:
...
//some options
title: {
useHTML: true,
text: "<sub>sub</sub>normal<sup>sup</sup>"
}
//other options
...
答案 1 :(得分:0)
这是在图表标题,轴标签,图例标签和数据标签上使用useHTML属性的方法 -
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
credits : {
enabled : false
},
title: {
text: 'Chart Title<sup>1</sup>',
useHTML : true,
},
xAxis: {
categories: [ 'label1','label2','label3<sup>4</sup>','label4'],
title:{
enabled: false
},
labels: {
useHTML : true,
title: {
enabled: false
}
},
},
yAxis: {
title: {
enabled: false
},
labels: {
useHTML : true,
formatter:function(){
if(this.value != 10){
return this.value;
}else{
return this.value + '<sup> 2</sup>';
}
}
}
},
legend: {
useHTML : true,
borderWidth: 0,
labelFormatter:function(){
if(this.name != 'legend1'){
return this.name;
}else{
return this.name + '<sup> 5</sup>';
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
useHTML : true,
y:-1,
formatter:function(){
if(this.y != 0){
if(this.y > 8 && this.y < 10){
return this.y + '<sup> 3</sup>';
}else{
return this.y;
}
}else{
return null;
}
}
}
}
},
series: [{
data: [{
y: 14.913
}, {
y: 8.281
}, {
y: 3.592
}, {
y: 3.017
}],
showInLegend: false,
},{
name: 'legend1',
color: 'rgb(14,178,89)'
},{
name: 'legend2',
color: 'rgb(100,100,9)'
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>