javascript - 以下标和上标的形式在 highcharts Xaxis 和 Yaxis 标题上显示内容

Question

我在我的应用程序中使用 highcharts 来显示数学计算和电气术语，所以我需要在 highcharts Xaxis 标题和 Yaxis 标题上以上标和下标的形式显示电气术语我没有尝试任何方法，但我没有得到任何解决方案html sub 和 sup 标记在那里不起作用，请给我任何适当的解决方案。

Answer 1

考虑使用useHTML属性：

...
//some options
title: {
   useHTML: true,
   text: "<sub>sub</sub>normal<sup>sup</sup>"
}
//other options
...

Answer 2

这是在图表标题、轴标签、图例标签和数据标签上使用 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>