时间戳

首页 > 解决方案 > Highcharts - 堆积列 - 为每个类别动态排序系列索引

javascript - Highcharts - 堆积列 - 为每个类别动态排序系列索引

问题描述

我有一个场景，我正在绘制一个堆积柱形图，目前卡在一个点，我需要以特定顺序对系列进行排序，以防同一天有多个数据点。问题是，每天的系列顺序可能不同 - 我有下面的代码和示例 -

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Stacked column chart'
},
xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
    min: 0,
    title: {
        text: 'Total fruit consumption'
    },
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 
    'gray'
        }
    }
},
legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) 
      || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
 },
tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: 
                 {point.stackTotal}'
},
plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            color: (Highcharts.theme && 
                   Highcharts.theme.dataLabelsColor) || 'white'
        }
    }
},
series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Mary',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Kevin',
    data: [3, 4, 4, 2, 5]
}]
});

JSFiddle：http: //jsfiddle.net/arj_ary/4kz7rdpn/2/

要求：在上面的 JSFiddle 中，对于每个类别，我希望最低的数据点显示在顶部。所以对于苹果，我希望玛丽在顶部，因为它的值为 2。橙子和梨也是如此。

这可以实现吗？任何帮助表示赞赏。

标签： javascriptjqueryhighchartsreact-highcharts

解决方案

可以使用这种方法来完成：

  1. 创建一个对列进行排序的函数：
  • 遍历点并按类别（苹果、橙子等）对它们进行分组
  • 循环遍历每组点并按 y 值对组进行排序
  • 循环遍历每组中的点并使用SVGElement.attr方法设置新计算的 y 位置（point.graphic 是一个 SVGElement 实例）。对数组执行相同point.dataLabel操作并将新位置设置为point.tooltipPos数组（否则工具提示将被错误放置）。
function sortColumns() {
  var chart = this,
    pointsByCat = {},
    zeroPixels,
    bottomYPositive,
    bottomYNegative,
    shapeArgs;

  chart.series.forEach(function(serie) {
    serie.points.forEach(function(point, index) {

      if (pointsByCat[point.category] === undefined) {
        pointsByCat[point.category] = [];
      }

      pointsByCat[point.category].push(point);
    });
  });

  Highcharts.objectEach(pointsByCat, function(points, key) {
    zeroPixels = chart.yAxis[0].toPixels(0) - chart.plotTop;
    bottomYPositive = bottomYNegative = zeroPixels;

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

    points.forEach(function(point) {
      if (point.series.visible) {
        if (point.shapeArgs.y < zeroPixels) {

          // Positive values
          point.graphic.attr({
            y: bottomYPositive - point.shapeArgs.height
          });

          point.dataLabel.attr({
            y: bottomYPositive - point.shapeArgs.height / 2 - point.dataLabel.height / 2
          });

          point.tooltipPos[1] = bottomYPositive - point.shapeArgs.height;
          bottomYPositive = bottomYPositive - point.shapeArgs.height;
        } else {

          // Negative values
          point.graphic.attr({
            y: bottomYNegative
          });

          point.dataLabel.attr({
            y: bottomYNegative + point.shapeArgs.height / 2 - point.dataLabel.height / 2
          });

          point.tooltipPos[1] = bottomYNegative;
          bottomYNegative = bottomYNegative + point.shapeArgs.height;
        }
      }
    });
  });
}



2）将上述函数设置为事件的chart.events.load回调chart.events.redraw：

  chart: {
    type: 'column',
    events: {
      load: sortColumns,
      redraw: sortColumns
    }
  }

演示：

API参考：

推荐阅读