highcharts 最大值在底部,最小值在顶部的堆叠条形图http://jsfiddle.net/6bCBf/5/

hkmswyz6  于 2023-06-23  发布在  Highcharts
关注(0)|答案(1)|浏览(166)

我们有一个要求,在我们的项目与高的图表,这是需要绘制堆叠条形图与最大的价值应该是在底部,最小的价值在顶部。
您能否就此提供您的意见/建议?为了便于参考,请回顾标题中的js fiddle示例
在这里,我们有2个系列和3个堆叠条,对于一月,Sec(30)大于base(10),因此sec系列应该是堆叠条的底部。
尝试用不同的方法来实现它,但无法得到它。

7gcisfzg

7gcisfzg1#

Highcharts中没有这样的内置功能,但您可以轻松地为其添加实现。使用attr方法操作每个点的形状来重建堆栈似乎是一个很好的解决方案。
例如:

$(function() {
  function sortSeries(chart) {
    const series = chart.series;
    const yStart = chart.plotHeight;

    series[0].points.forEach((point, index) => {
      const points = series.map(s => s.points[index]);
      points.sort((p1, p2) => p2.y - p1.y);
      let lastY = 0;

      points.forEach((p, i) => {
        if (!p.series || !p.series.visible) {
          return false;
        }

        const newY = lastY ?
          lastY - p.shapeArgs.height :
          yStart - p.shapeArgs.height;

        lastY = newY;

        p.graphic.attr({
          y: newY
        });
        p.tooltipPos[1] = newY;
      });
    });
  }

  var chart = new Highcharts.Chart({
    chart: {
      ...,
      events: {
        render: function() {
          sortSeries(this);
        }
      }
    },
    ...
  }, ...);
});

现场演示:http://jsfiddle.net/BlackLabel/ahp037xm/
API引用:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render

相关问题