Question

我正在使用HighCharts渲染堆叠百分比的水平条形图，除非HighCharts默认反转我的系列数据的顺序，否则它的效果很好。

http://jsfiddle.net/U8nZ6/

正如你在演示中看到的那样，尽管$ 20k是data1 / data2数组的第一行，但它是每个bar的最后一个块（一直在右边）。我希望这是有序的，所以我尝试了几件事：

1）使用数组.reverse() d渲染图表。您可以在上面的演示中启用这些行，看看结果是颜色没有排列，因为每个图表中有不同数量的记录，所以这不起作用（并且不应该是唯一的这样做的方式，我敢肯定）

2）使用xAxis.reversed = true。这使得颜色匹配的顺序正确，但是图例反转（100％到0％）并且从右到左动画。

还有另外一种解决方法吗？

Answer 1

好吧，假设没有别的选择，这就是我所说的，以防万一有人通过Google发现这一点：

使用上述选项2（反转轴），我只是通过格式化器修改标签为反向。

在我的情况下，因为它的百分比（0-100），我只是说：

labels: { formatter: function() { return Math.abs(this.value - 100) } }

Answer 2

看起来有一个名为reverseStacks（http://api.highcharts.com/highcharts#yAxis.reversedStacks）的选项，对于堆积图表，默认为true。您可能希望在代码中将其设置为false。

我注意到你的JSFiddle专门请求Highcharts版本2.3.5，其中可能不存在此选项。

Answer 3

我有类似的问题。在尝试不同的选项后，我在渲染图表之前最终设置了系列索引。通用代码：

if (options.chart.type === 'bar') {

    for (var i = 0; i < options.series.length; i++) {
        options.series[i].index = options.series.length - 1 - i;
        options.series[i].legendIndex = i;
    }
}

为您的示例更新了jsFiddle：http://jsfiddle.net/U8nZ6/23/

Answer 4

如果有人还在寻找这个。我在传奇中使用了颠倒：真实。

legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false,
            reversed: true // right here!
        }

为什么HighCharts会颠倒我系列的顺序？

4 个答案: