highcharts柱状图如何自定义颜色

QQ截图20151124110513.png

我是在做这样的一个报表!!当时需求是正数的柱子颜色为红色!负数的柱子颜色为蓝色!!!而数据的来源是掉接口!!不是手写的!!!!如果是手写我知道是这样传值的: 
data: [{
name: 'Point 1',
color: '#00FF00',
y: -10
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]

而掉接口的格式该如何去写!!!
QQ截图20151124111024.png

请大神指教!!!!!
已邀请:

jsbome - 个人博客:http://highcharts.daxueba.net

赞同来自: john *时空‖枷锁﹡

设置
turboThreshold:0
color:'red',
negativeColor:'blue'
 
就可以了。

john - 个人微博:http://weibo.com/u/2175683160

赞同来自:

有两种方法:
 
1、用 series.zones ,配置代码如下
series: [{
name: 'John',
data: [5, 3, 4, 7, 2, -1],
zones: [{
value: 0,
color: 'red'
}]
}]
表示 0 一下的值颜色为红色。
 
相关API:http://www.hcharts.cn/api/index.php#plotOptions.column.zones
教程:http://www.hcharts.cn/docs/index.php?doc=basic-series
 
2、通过遍历数据做判断给定颜色
// 数据处理
var data = [20, 10, 1, -10, 100, -20];

var finalData = [];

for(var i=0;i<data.length;i++) {
var d = data[i];
finalData.push({
y: d,
color: d > 0 ? 'green' : 'red' // 根据值判断给定颜色
})
}


$('#container').highcharts({
// ...

series: [{
data: finalData
}]
// ...
})

john - 个人微博:http://weibo.com/u/2175683160

赞同来自:

补充,楼上所说的内容是阈值及阈值颜色控制,对应的实例是: 
 
http://code.hcharts.cn/hcharts.cn/hhhGsv
 
 

要回复问题请先登录注册