Question

目前，我正在折线图中显示最高点。但是我想将<div class="grid"> <div class="header">header</div> <div class="paragraph">p1</div> <div class="paragraph">p2</div> <div class="paragraph">p3</div> <div class="paragraph">p4</div> <div class="footer">footer</div> </div>更改为图表中的前5个最大价值点。如何在Highcharts中实现此目标？

dataMax

Answer 1

正如@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

Answer 2

据我所知formatter回调是格式化数据标签的方法。如果要显示前N个点，则应将数据排序到新数组中，并拉出前5个值。这是一个如何克隆和排序数组以及提取formatter调用中前5个元素的示例。

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>

如何在Highcharts中显示多个“ dataMax”？

2 个答案: