javascript - Highcharts:将值(value)最小的系列放在顶部

Question

有没有办法将值最多的系列放在底部，将值最小的系列放在顶部，这样就不会破坏情节？

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  xAxis: {
    tickmarkPlacement: 'on',
    type: 'datetime',
    title: {
      enabled: false
    },
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: '#666666',
      lineWidth: 1,
      marker: {
        lineWidth: 1,
        lineColor: '#666666'
      }
    }
  },
  series: [{
    name: 'Approved',
    color: 'green',
    data: [{
      x: Date.UTC(2017, 09, 06),
      y: 21
    }, {
      x: Date.UTC(2017, 09, 07),
      y: 21
    }, {
      x: Date.UTC(2017, 09, 08),
      y: 21
    }, {
      x: Date.UTC(2017, 09, 09),
      y: 21
    }, {
      x: Date.UTC(2017, 09, 10),
      y: 21
    }, {
      x: Date.UTC(2017, 09, 11),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 12),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 13),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 14),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 15),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 16),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 17),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 18),
      y: 19
    }, {
      x: Date.UTC(2017, 09, 19),
      y: 21
    }, ]
  }, {
    name: 'Proposal',
    color: 'yellow',
    data: [{
      x: Date.UTC(2017, 09, 11),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 12),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 13),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 14),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 15),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 16),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 17),
      y: 2
    }, {
      x: Date.UTC(2017, 09, 18),
      y: 2
    }, ]
  }, {
    name: 'Rejected',
    color: 'grey',
    data: [{
      x: Date.UTC(2017, 09, 06),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 07),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 08),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 09),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 10),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 11),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 12),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 13),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 14),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 15),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 16),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 17),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 18),
      y: 1
    }, {
      x: Date.UTC(2017, 09, 19),
      y: 1
    }]
  }]
});

<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>

JSFiddle: http://jsfiddle.net/atc4sxzL/2/

请注意，该系列是通过 Flask 在 Python 中动态生成的。

Answer 1

我做了一些有用的东西，并且按照你的要求做了。我将以下内容添加到chart.events.load:

var orderingArray = []
let series = this.series;
for (var i = 0; i < series.length; i++) {
  orderingArray.push({
    index: i,
    arrLen: series[i].yData.length
  })
}
orderingArray = orderingArray.sort(function(a, b) {
  return a.arrLen - b.arrLen;
});
for (var i = 0; i < orderingArray.length; i++) {
  series[orderingArray[i]['index']].update({
    index: i + 1
  });
}

不太好的地方是我调用 update 的次数与系列的次数相同。所以在这种情况下，图表被重绘了3次，这是没有必要的。但我没有找到另一种方法来做到这一点，尝试使用 setOptions() 并手动调用 redraw() ，但它不起作用。仅供引用。

此处的工作示例:http://jsfiddle.net/ewolden/atc4sxzL/4/

chart.events.load 上的 API:https://api.highcharts.com/highcharts/chart.events.load