您的位置:首页 > 其它

highcharts柱状图设置颜色渐变的效果

2015-06-12 14:55 225 查看
//定义一个全局颜色数组
var colorArr = ['#FD6F78', '#FBD064', '#BDDB5E'];

$(function () {
$('#container').highcharts({
chart: {
type: 'column',
borderWidth: 0,
plotBorderWidth: 0
},
title: {
text : '<span style="font-weight:bold;font-size:12px;">实时资金总流入</span><span style="color:red;font-size:12px;font-weight:bold;">2532</span><span style="font-weight:bold;font-size:12px;">万</span>'
},
legend : {
enabled : false
},
xAxis: {
categories: ['主力<br/>净流入','中单<br/>净流入','小单<br/>净流入'],
lineWidth : 1
},
yAxis: {
enabled:false,
title: {
text: ' '
},
labels :{
enabled : false
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.1,
borderWidth: 0.1,
borderColor : "#000"
}
},
credits: {
enabled : false
},
series: [{
name: ' ',
data: [49.9, -71.5, -106.4],

dataLabels: {
enabled: true,
color : "#F00"
}
}]
}, function (chart) {
SetEveryOnePointColor(chart);
});
});

//设置每一个数据点的颜色值
function SetEveryOnePointColor(chart) {
//获得第一个序列的所有数据点
var pointsList = chart.series[0].points;
//遍历设置每一个数据点颜色
for (var i = 0; i < pointsList.length; i++) {
chart.series[0].points[i].update({
color: {
linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
stops: [
[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
[1, 'rgb(255, 255, 255)']
]
}
});
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: