Sort values in stacked bar highcharts not work

无人久伴 提交于 2020-05-28 06:43:39

问题


I tried to sort values in stacked bar base on this question Sort the series data for every X-Axis in Highcharts

But after sorting, the data in series seem wrong.

The code for sorting

seriesData.forEach(function (name) {
              if (name.data != undefined) {
                name.data.sort(function (a, b) {

                  if (a < b) {
                    return -1;
                  } else if (a > b) {
                    return 1;
                  }
                  return 0;
                });
              }
            });

Here is full my source code

JSfiddle https://jsfiddle.net/viethien/hdy2frkv/9/

var seriesData = [{
    "name": "(Component)",
    "data": [2039521123, 0, 0, 4046613348, 0, 544280301, 3865715691, 0],
    "display": 2,
    "stack": "Forecast",
    "showInLegend": false,
    "pointPadding": 0,
    "pointPlacement": 0
  }, {
    "name": "(Substrate)",
    "data": [1848232605, 1109333700, 0, 0, 1478070275, 0, 0, 0],
    "display": 2,
    "stack": "Forecast",
    "showInLegend": false,
    "pointPadding": 0,
    "pointPlacement": 0
  }, {
    "name": "(Module)",
    "data": [0, 532822345, 452625462, 0, 0, 207607714, 0, 103089669],
    "display": 2,
    "stack": "Forecast",
    "showInLegend": false,
    "pointPadding": 0,
    "pointPlacement": 0
  }, {
    "name": "(Support)",
    "data": [0, 0, 0, 0, 0, 537829903, 0, 0],
    "display": 1,
    "stack": "Forecast",
    "showInLegend": false,
    "pointPadding": 0,
    "pointPlacement": 0
  }, {
    "name": "(Component)",
    "data": [11118985500, 0, 4732915644, 14216361483, 0, 3423432732, 3216931478, 0],
    "display": 1,
    "stack": "Real",
    "showInLegend": false
  }, {
    "name": "(Substrate)",
    "data": [8495153800, 3191092821, 0, 0, 13153490000, 0, 0, 0],
    "display": 3,
    "stack": "Real",
    "showInLegend": false
  }, {
    "name": "(Module)",
    "data": [0, 13925175787, 9837488553, 0, 0, 3705001758, 0, 338212038],
    "display": 1,
    "stack": "Real",
    "showInLegend": false
  }, {
    "name": "(Support)",
    "data": [0, 0, 0, 0, 0, 4845038686, 0, 0],
    "display": 1,
    "stack": "Real",
    "showInLegend": false
  }, {
    "name": "Forecast",
    "color": "#fe7c7c",
    "events": {}
  }, {
    "name": "Real",
    "color": "#43d487",
    "events": {}
  }];
  
  
  var option = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        textOutline: false,
        color: ( // theme
          Highcharts.defaultOptions.title.style &&
          Highcharts.defaultOptions.title.style.color
        ) || 'gray'
      }
    }
  },
  legend: {
    align: 'center',
    x: 0,
    verticalAlign: 'bottom',
    y: 5,

    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
    borderColor: '#CCC',
    borderWidth: 0,
    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
      },
      pointPadding: 0.05,
      maxpointWidth: 35,
      //groupPadding:0.1,
      borderWidth: 0
    },
    series: {
      maxpointWidth: 35,
      groupPadding: 0.36,
      //stacking: 'normal',
      dataLabels: {
        formatter: function() {
          if (this.y === this.point.stackTotal || this.y == 0) {
            return ''
          }
          return this.series.name;
        },
        enabled: true,
        //allowOverlap: true,
        //align: 'right',
        color: '#444',
        textOutline: false,
        shadow: false,
        //x:-50,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      //pointPadding: 0.1,
      pointWidth: 50,
      groupPadding: 0.2,
      stacking: 'normal',
      //colorByPoint: true,
      //showInLegend: false
    }
  },
  series: []
}

 seriesData.forEach(function (name) {
          if (name.data != undefined) {
            name.data.sort(function (a, b) {
              
              if (a < b) {
                return -1;
              } else if (a > b) {
                return 1;
              }
              return 0;
            });
          }
        });
        
option.series = seriesData;

var chart = Highcharts.chart('container', option);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

Updated:

When i tried Sebastian sample but chart display incorrect

来源:https://stackoverflow.com/questions/61865464/sort-values-in-stacked-bar-highcharts-not-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!