Highcharts Datalabel форматирование в сплайне

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

Вы должны использовать dataLabels param в series.

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 в форматировании.