Wyświetlanie treści w wysokiej jakości Xaxis i tytule Yaxis w formie indeksu dolnego i indeksu górnego

Question

Używam wysokiej jakości wykresów do mojej aplikacji do wyświetlania matematycznych obliczeń i terminologii elektronicznej, więc muszę wyświetlić elktryczny termin w wysokiej jakości tytule Xaxis i tytule Yaxis w formie indeksu górnego i indeks dolny Próbowałem nie ma sposobów, ale jeszcze nie dostaję żadnych soln html sub i tagów sup nie działają tam proszę daj mi jakieś właściwe rozwiązanie.

Answer 1

Rozważ użycie useHTML property:

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

Answer 2

W ten sposób można wykorzystać właściwość useHTML w tytule wykresu, etykiety osi, etykiety legendy i etykiet danych -

$(function() { 
 
    $('#container').highcharts({ 
 
\t \t chart: { 
 
      type: 'column' 
 
     }, 
 
     credits : { 
 
      enabled : false 
 
     }, 
 
     title: { 
 
      text: 'Chart Title<sup>1</sup>', 
 
      useHTML : true, 
 
     }, 
 
     xAxis: { 
 
\t \t \t categories: [ 'label1','label2','label3<sup>4</sup>','label4'], 
 
      title:{ 
 
       enabled: false 
 
      }, \t \t \t \t \t \t 
 
      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>'; 
 
        } \t \t \t \t \t 
 
       } \t \t \t \t \t \t \t \t 
 
      } \t \t \t \t \t \t 
 
     }, 
 
     legend: { 
 
      useHTML : true, 
 
      borderWidth: 0, 
 
      labelFormatter:function(){ 
 
       if(this.name != 'legend1'){ 
 
        return this.name; 
 
       }else{ 
 
        return this.name + '<sup> 5</sup>'; 
 
       } \t \t \t \t \t 
 
      } \t 
 
     }, 
 
     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; 
 
         } \t \t \t \t \t 
 
        } \t \t \t \t 
 
       } \t \t \t \t \t \t 
 
      } \t \t \t 
 
     }, \t \t 
 
     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>