没有堆叠的 Highcharts 百分比？

Question

是否可以创建一个带有百分比样条曲线但不堆叠的 Highcharts 图表？

我想在相对视图中显示线条，但我希望它们在百分比变化时交叉。

plotOptions: {
    series: {
        pointStart: 2010,
         stacking: 'percent'

    }
},

但没有行 'stacking' 行为。堆叠起来真的很不方便，因为很难分辨它们是'absolute'值还是'stacked'值。

看这里，2010年最上面那条线应该在黑线下面

Answer 1

您需要先处理数据，然后再将它们放入图表配置中。

计算总和：

var data = [3, 5, 10, 15,25]
var data2 = [25,15, 10, 5, 0]

var sum = data.map((v, i) => v + data2[i]) // grab sums

计算百分比并设置数据：

    series: [{
    name: 'Installation',
    data: data.map((v, i) => ({
      y: v / sum[i] * 100,
      absoluteY: v
    }))
}, {
    name: 'Manufacturing',
    data: data2.map((v, i) => ({
      y: v / sum[i] * 100,
      absoluteY: v
    }))
}]

更改工具提示的点格式，使其显示绝对 y 值而不是百分比值

tooltip: {
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.absoluteY}</b><br/>'
},

示例：http://jsfiddle.net/dp6pjeo9/6/

没有堆叠的 Highcharts 百分比？

Highcharts percentage without stacking?

linechart

percentage

highcharts