Question

我已经能够通过在系列对象中设置index字段来控制高图的堆叠顺序，如下所示：

            series: [
                {
                    name: 'My Products',
                    data: randomRange(12, 7, 61), // Just random test data for now.
                    stack: 'ProductType',
                    index: 1 // Here index sets the stacking order in the bar.  This will be on the bottom.
                }, {
                    name: 'Total',
                    data: randomRange(12, 233, 240), // Just random test data for now.
                    stack: 'ProductType',
                    index: 0 // This will be on the top.
                }
            ]

正如您所看到的，较低的索引号将在条形图中堆叠得更高。

现在我正在尝试刷新系列，但堆叠顺序丢失，我无法设置索引：

            var chart1 = $('#quantityPerMonthChart1').highcharts();
            chart1.series[1].setData(randomRange(12, 233, 240), false);
            chart1.series[1].index = 0;  // Doesn't work.
            chart1.series[0].setData(randomRange(12, 7, 61), false);
            chart1.series[0].index = 1;  // Doesn't work.
            chart1.redraw();

Answer 1

index是可以使用Series.update()更新的系列的选项 - 它也可以用于更新系列的数据，因为数据是另一种选择。

$(function() {
  var chart = Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      data: [1, 2, 3, 4, 5, 4],
      index: 1
    }, {
      data: [6, 4, 5, 6, 7, 4],
      index: 2,
      id: 's2'
    }]
  });

  $('#button').click(function() {
        chart.get('s2').update({index: 0});
  });
});

示例：http://jsfiddle.net/ae7Ljmc7/

Answer 2

网上似乎没有关于如何执行此操作的文档或其他示例。所以我进行了实验，发现索引按照添加到系列数组的顺序设置为自然。所以我可以将我的种子系列更改为：

            series: [
                {
                    name: 'Total', // The series you add first will get stacked on the top
                    data: randomRange(12, 233, 240),
                    stack: 'ProductType'
                }, {
                    name: 'My Products',
                    data: randomRange(12, 7, 61),
                    stack: 'ProductType'
                }
            ]

然后当我用不同的选项刷新图表数据时，我这样做：

        $('#productType').on('change', function() {
            var chart1 = $('#quantityPerMonthChart1').highcharts();
            // These series already have an index (which affects stack order).  
            // Here it is unchanged.
            chart1.series[0].setData(randomRange(12, 233, 240), false);
            chart1.series[1].setData(randomRange(12, 7, 61), false);
            chart1.redraw();
        });

如何在堆积条形图中设置系列的堆栈顺序？

2 个答案: