Highcharts排序的堆叠列:标号位置

jjhzyzn0  于 2023-04-30  发布在  Highcharts
关注(0)|答案(1)|浏览(248)

我需要在Highcharts中对分类的堆叠列进行排序(按总数和每列中的类别排序,按升序/降序排序系列)。
我发现主题Highcharts: Sort column stack order to ascending似乎是实现这一目标的一个很好的解决方案。
结果在这里可见:https://jsfiddle.net/vegaelce/0ye9objs/
我想总结的两点是:
1/正确放置值标签(它们不遵循序列排序)。我尝试更改数据标记y位置:stackedPoint.dataLabel.y = plotY;未成功
2/使图例上的点击功能(例如,当您点击Jane时,它不会导致预期的行为)。如果不可能:只是禁用点击,让可用的悬停
谢谢

kyks70gy

kyks70gy1#

我稍微更新了一下这个例子。还有一个额外的sortStacks函数,在图表加载时调用。此外,数据标签的位置,通过使用attr方法和隐藏序列被忽略的sortSeries函数校正。

function sortStacks(chart) {
  const series = chart.series;
  const newSeries = [];
  let sortedPoints;

  series.forEach(s => {
    sortedPoints = [...s.points].sort((p1, p2) => p2.total - p1.total);
    s.setData(sortedPoints.map(p => p.y), false);
  });

  chart.xAxis[0].setCategories(sortedPoints.map(p => p.category));
}

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.dataLabel.attr({
        y: newY + p.shapeArgs.height / 2 - p.dataLabel.height / 2
      });
      p.tooltipPos[1] = newY;
    });
  });
}

Highcharts.chart('container', {
  chart: {
    ...,
    events: {
      load: function() {
        sortStacks(this);
      },
      render: function() {
        sortSeries(this);
      }
    }
  },
  ...
});

现场演示:http://jsfiddle.net/BlackLabel/8fp96u1r/
**API引用:**https:// www.example.com

相关问题