6

我正在使用 HighCharts 来呈现堆叠百分比水平条形图，它工作得很好，除了 HighCharts 默认反转我的系列数据的顺序。

http://jsfiddle.net/U8nZ6/

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

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

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

还有其他方法吗？

4

4 回答 4

3

好吧，假设没有其他选择，如果有人通过谷歌偶然发现了这个，我会这样做：

使用上述选项 2（反转轴），我只是通过格式化程序将标签修改为相反的。

就我而言，因为它是百分比（0-100），所以我简单地说：

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

于 2013-03-02T19:57:52.453 回答
2

看起来有一个名为 reverseStacks ( http://api.highcharts.com/highcharts#yAxis.reversedStacks ) 的选项默认为 true 堆叠图表。您可能希望在代码中将此设置为 false。

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

于 2015-02-23T13:44:01.277 回答
1

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

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/

于 2014-01-17T11:47:56.197 回答
1

以防有人还在寻找这个。我在我的传说中使用了 reversed:true 。

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!
        }
于 2015-04-10T20:14:55.307 回答