Highcharts樣條線中的數據標籤格式化

Question

我需要百分號顯示在我的Highcharts樣條曲線圖的數據標籤中。到目前爲止，每一次格式的重複：'{point}％'都會打破整個事情，無論我在哪裏寫。基本上，而不是數據標籤讀取「22」它應該讀「22％」。

JSFiddle here。

Highcharts.chart('container', { 
 
    chart: { 
 
     type: 'spline' 
 
    }, 
 
    title: { 
 
     text: 'Enrollment By Race & Ethnicity' 
 
    }, 
 
    subtitle: { 
 
     text: '' 
 
    }, 
 
    xAxis: { 
 
     categories: ['Fall 2012', 'Fall 2013', 'Fall 2014', 'Fall 2015', 'Fall 2016'] 
 
    }, 
 
    yAxis: { 
 
     title: { 
 
      text: 'Percentage' 
 
     }, 
 
     labels: { 
 
      formatter: function() { 
 
       return this.value + '%'; 
 
      } 
 
     } 
 
    }, 
 
    tooltip: { 
 
     crosshairs: true, 
 
     shared: true 
 
    }, 
 
    plotOptions: { 
 
    spline: { 
 
       dataLabels: { 
 
       enabled: true 
 
      }, 
 
      marker: { 
 
       radius: 4, 
 
       lineColor: '#666666', 
 
       lineWidth: 1 
 
      } 
 

 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'Hispanic/Latino Undergrads', 
 
     marker: { 
 
      symbol: 'square' 
 
     }, 
 
     data: [22, 25, 28, 31, 33] 
 
    }] 
 
});​

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>​

Answer 1

您應該在series中使用dataLabels參數。

series: [{ 
 
    name: 'Hispanic/Latino Undergrads', 
 
    marker: { 
 
     symbol: 'square' 
 
    }, 
 
    data: [22, 25, 28, 31, 33], 
 
    dataLabels: { 
 
     formatter: function() { 
 
      return this.y + '%'; 
 
     } 
 
    } 
 
}]

Here的jsfiddle。

Answer 2

爲了格式化點的標號一系列你要麼做了series格式化，或在相關plotOptions。

例如，使用plotOptions（JSFiddle）（API）：

plotOptions: { 
    spline: { 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return this.y + '%'; 
      } 
     } 
    } 
} 

或者直接對相關series（JSFiddle）（API）：

series: [{ 
    dataLabels: { 
     enabled: true, 
     formatter: function() { 
      return this.y + '%'; 
     } 
    } 
}] 

參見描述的API-鏈接通過格式化程序中的this可以獲得哪些值。