Question

柱状图怎么才能做出这样的渐变效果？PPT美化 office2013版的

Answer 1

以先对数据源的数据进行排序

为了让图表每一根柱子的颜色可配置，我们首先定义一个颜色数组：

//定义一个全局颜色数组

var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#000000','#560f23'];
复制代码

接着我们要设置每一个柱子的linearGradient才行的，这里我们采用在图表创建的回调函数内去完成这个动态颜色切换的效果。

$(function () {

$('#container').highcharts({

chart: {

type: 'column'

},

subtitle: {

text: 'Source: www.stepday.com'

},

xAxis: {

categories: [

'Jan',

'Feb',

'Mar',

'Apr',

'May',

'Jun',

'Jul',

'Aug',

'Sep',

'Oct',

'Nov',

'Dec'

]

},

yAxis: {

min: 0,

title: {

text: 'Rainfall (mm)'

}

},

tooltip: {

headerFormat: '{point.key}',

pointFormat: '
' +

'
',

footerFormat: '
{series.name}: {point.y:.1f} mm
',

shared: true,

useHTML: true

},

plotOptions: {

column: {

pointPadding: 0.2,

borderWidth: 0

}

},

credits: {

text: "www.stepday.com",

href: "http://www.stepday.com",

style: {

color: "red"

}

},

series: [{

name: 'Tokyo',

data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}]

}, 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: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果

stops: [

[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],

[0.5, 'rgb(255, 255, 255)'],

[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]

]

}

});

}

}
复制代码