Как показать более одного «dataMax» в Highcharts?

Question

В настоящее время я показываю максимальную точку на линейном графике.Но я хочу изменить dataMax на 5 точек максимального значения на графике. Как я могу добиться этого в Highcharts?

var defaultData = 'urlto.csv';
var urlInput = document.getElementById('fetchURL');
var pollingCheckbox = document.getElementById('enablePolling');
var pollingInput = document.getElementById('pollingTime');

function createChart() {
  Highcharts.chart('closed5', {
    chart: {
      type: 'area',
      zoomType: 'x'
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          style: {},
          formatter: function() {
            if (this.y === this.series.dataMax) {
              return this.y;
            }
          }
        }
      }
    },
    title: {
      text: 'Chart for charting'
    },
    data: {
      csvURL: urlInput.value,
      enablePolling: pollingCheckbox.checked === true,
      dataRefreshRate: parseInt(pollingInput.value, 10)
    }
  });

  if (pollingInput.value < 1 || !pollingInput.value) {
    pollingInput.value = 1;
  }
}

urlInput.value = defaultData;

// We recreate instead of using chart update to make sure the loaded CSV
// and such is completely gone.
pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart;

// Create the chart
createChart();

Answer 1

Насколько я знаю, formatter обратный вызов - это способ форматирования меток данных.Если вы хотите показать верхние N точек, вы должны отсортировать данные в новом массиве и вытащить 5 верхних значений.Это пример того, как клонировать и отсортировать массив и извлечь 5 верхних элементов в вызове formatter.

let data = [32, 10, 20, 99, 30, 54, 85, 56, 11, 26, 15, 45, 55, 65];
//Copy the array
let temp = data.slice();
// Sort the temp array in descending order
temp.sort((a, b) => b - a);

Highcharts.chart('closed5', {
  chart: {
    type: 'area',
    zoomType: 'x'
  },
  title: {
    text: 'Chart for charting'
  },
  series: [{
    data: data,
    dataLabels: {
      enabled: true,
      formatter: function() {
        if (temp.indexOf(this.y) < 5) {
          return this.y;
        }
      },
    },
  }]
});

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

<div id="closed5"></div>

Answer 2

Как правильно заметил @ewolden, вы можете отсортировать данные и показать только пять самых высоких значений:

var data = [11, 22, 33, 44, 55, 66, 15, 25, 35, 45, 55, 65],
    sortedData = data.slice().sort(function(a, b){
        return b - a
    });

Highcharts.chart('container', {
    series: [{
        data: data,
        dataLabels: {
            enabled: true,
            formatter: function() {
                if (sortedData.indexOf(this.y) < 5) {
                    return this.y;
                }
            }
        }
    }]
});

Демонстрационная версия: http://jsfiddle.net/BlackLabel/xkf2w5tb/

API: https://api.highcharts.com/highmaps/series.mapbubble.dataLabels.formatter