Как добавить символ процента с данными внутри столбца в highchart?

Question

Я использую колонку highchart. Теперь я хочу знак% после моих данных. Что-то вроде, если у меня есть значение 7.18, я хочу показать его в формате 7.18%. Как я могу это сделать? Пожалуйста, поделитесь со мной, если у кого есть идеи.

Мои коды ниже:

 $('#cagr2').highcharts({ 
     chart: { 
      type: 'column', 
      spacingBottom: -7, 
      spacingTop:20 
     }, 
     title: { 
      text: '' 
     }, exporting: { enabled: false }, 
     credits: { 
     enabled: false 
     }, 
     xAxis: { 
      lineColor: 'transparent', 
      categories: [''] 
     }, 
     yAxis: { 

    lineWidth: 0, 
    minorGridLineWidth: 0, 
    minorGridLineWidth: 0, 
    gridLineColor: 'transparent', 
    lineColor: 'transparent', 

    labels: { 
     enabled: false 
    }, 
    minorTickLength: 0, 
    tickLength: 0, 
       min: 0, 
      title: { 
       text: '' 
      }, 
      stackLabels: { 
       enabled: false, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 

     legend: { 
      enabled: true, 
      layout: 'horizontal', 
      align: 'center', 
      //x: -10, 
      verticalAlign: 'top', 
      y: -5, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#ffffff', 
      borderWidth: 1, 
      shadow: true 
     }, 
     tooltip: { 
      headerFormat: '<b>{point.x}</b>', 
      pointFormat: '{series.name}: {point.y}', 
      valueSuffix: ' %' 
     }, 

     plotOptions: { 
      series: { 

       animation: { 
        duration: 7000 
       } 

      }, 

      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black', 
         fontSize: '18px' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'Rate of return', 
      data: [parseFloat(cagr)] 
     }] 
    }); 

Answer 1

Все, что вам нужно сделать здесь добавить атрибут format или formatter вашему dataLabels.

Пример использования format:

column: { 
    stacking: 'normal', 
    dataLabels: { 
     enabled: true, 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
     style: { 
      textShadow: '0 0 3px black', 
      fontSize: '18px' 
     }, 
     format: '{y} %', // your label's value plus the percentage sign 
     valueDecimals: 2 // show your label's value up to two decimal places 
    } 
} 

Пример использования formatter:

column: { 
    stacking: 'normal', 
    dataLabels: { 
     enabled: true, 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
     style: { 
      textShadow: '0 0 3px black', 
      fontSize: '18px' 
     }, 
     formatter: function() { 
      // numberFormat takes your label's value and the decimal places to show 
      return Highcharts.numberFormat(this.y, 2) + '%'; 
     }, 
    } 
} 

Вот как это будет выглядеть:

Надеюсь, это поможет!