如何绘制区域类型高图？

Question

这里是jsfiddle代码复现,

我正在使用 Highcharts 绘制面积图，我该如何进行以下操作？

我需要将 y 轴标签向右移动
绘制 3 种颜色的面积图 ['#762232', '#EFCA32', '#007788'] 及其各自的值。

预期输出

Answer 1

将 yAxis.opposite 设置为 true。

再添加两个系列并使用 tickPositioner 将它们的最后值显示为标签。

 yAxis: {
     opposite: true,
     showFirstLabel: false,
     showLastLabel: false,
     tickPositioner: function() {
         var prevTickPos = this.tickPositions,
             tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
             series = this.chart.series;

         series.forEach(function(s) {
             tickPositions.push(s.processedYData[s.processedYData.length - 1]);
         });

         tickPositions.sort(function(a, b) {
             return a - b;
         });

         return tickPositions;
     },
     ...
 }

现场演示： https://jsfiddle.net/BlackLabel/gk1t6cp2/

API 参考： https://api.highcharts.com/highcharts/yAxis.opposite

如何绘制区域类型高图？

How to plot area type highchart?

javascript

highcharts