Question

highcharts 动态设置columnrange条形图每段颜色

如图片，同一行中，使得每一段显示指定颜色（columnrange！~）
$(function () {
$('#container').highcharts({ chart: {type: 'columnrange',inverted: true },
yAxis: {title: { text: 'Temperature ( °C )' }},
tooltip: { valueSuffix: '°C'},
legend: { enabled: false},
series: [{
name: 'Temperatures',
data: [[1,-9.7, 9.4],[1,9.4, 11],[1,11, 13]]
} ]});});
其实是后台会处理一些数据过来判断，根据数据判断每段要红色还是黄色。进行设置

Answer 1

你加上这段试试

colors: [
        	'#c42525', '#2f7ed8', '#f28f43', '#8bbc21', '#0d233a'
        ],

追问

这段加上去。每一段的颜色都是一样的，都变成红色，我要的是同一个Y坐标，每一段。颜色是指定的（其实也只有两个颜色，可是要区分）

追答

能不能把你的series里面的给点测试数据,我本地跑下调一下

追问

弄到问题补充那里去了

追答

加上这段

plotOptions: {
        columnrange: {
                colors:[
         '#c4ff25', '#2f7ed8', '#f28f43', '#8bbc21'
         ],  //自定义的颜色
                colorByPoint:true  //可以让每段区分颜色
        }
    },

追问

不好意思，那有能让这样两行合并在一起的属性吗。因为。。。这样才有图例显示

 series: [{ name: 'Temperatures', data: [[1,9, 9.4],[1,9.8, 11]]},

        {name: 'Temperatures',data: [[1,9.4, 9.8],[1,11, 12]] } ]

追答

series: [
{name: 'Temperatures',data: [[1,9, 9.4],[1,9.8, 11],[1,9.4, 9.8],[1,11, 12]]}
        ]

是这种?这样就两行合成一行了

追问

我解释一下啊。这是我的两种想法

1. 一个Y坐标针对不同段，设置红色或黄色

2. 像第二张图，两个name合成一行，也可以显示两种颜色

我是想说，分成两个name，这样就可以分成两个颜色，产生两个图例，而像我之前的想法，一个Y坐标分成两个颜色的话，只有一个图例。

谢谢你哈

追答

两种感觉差不多...能符合要求就行,还需要修改什么?