highcharts图表组件实战经验篇：如何设置柱状图柱子立体（颜色渐变）效果类似3D效果之linearGradient和stops

[摘要]： 为了让2D的柱状图展现更加美观和独具美感，可能客户会要求你将柱状图的柱子弄成立体效果，那样看上去就很有立体的感觉，美观度又会上升一个等级的。 这样的图表看着是不是觉得很赞勒。那么我们如何配置才能够得到这样的效果呢？ 通过上面的图表其实你不难发现每根柱子其实中间的颜色相对来说比较浅，两侧比较深，看上去就有有立体的感觉，再结合highcharts图表的可配置性，我们最终决定通过颜色线性渐变的方式来达到这样的目的。 由于highcharts使用svg渲染的，所以通过查询得知svg内的线性渐变属性为：linearGradient 关于linearGradient的属性设置以及参数配置含义这里就不做讲解了，大家可以自己去网上搜索即可得到更为详细的信息。 为了让图表每一根柱子的颜色可配置，我们首先定义一个颜色数组： ...

为了让2D的柱状图展现更加美观和独具美感，可能客户会要求你将柱状图的柱子弄成立体效果，那样看上去就很有立体的感觉，美观度又会上升一个等级的。

这样的图表看着是不是觉得很赞勒。那么我们如何配置才能够得到这样的效果呢？

通过上面的图表其实你不难发现每根柱子其实中间的颜色相对来说比较浅，两侧比较深，看上去就有有立体的感觉，再结合highcharts图表的可配置性，我们最终决定通过颜色线性渐变的方式来达到这样的目的。

由于highcharts使用svg渲染的，所以通过查询得知svg内的线性渐变属性为：linearGradient

关于linearGradient的属性设置以及参数配置含义这里就不做讲解了，大家可以自己去网上搜索即可得到更为详细的信息。

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

view source print ?

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

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

上面时十二种颜色值组成的一维数组。

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

view source print ?

01. $(function () {

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

03. chart: {

04. type: 'column'

05. },

06. title: {

07. text: '数据点线性颜色渐变效果'

08. },

09. subtitle: {

10. text: 'Source: www.stepday.com'

11. },

12. xAxis: {

13. categories: [

14. 'Jan',

15. 'Feb',

16. 'Mar',

17. 'Apr',

18. 'May',

19. 'Jun',

20. 'Jul',

21. 'Aug',

22. 'Sep',

23. 'Oct',

24. 'Nov',

25. 'Dec'

26. ]

27. },

28. yAxis: {

29. min: 0,

30. title: {

31. text: 'Rainfall (mm)'

32. }

33. },

34. tooltip: {

35. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

36. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +

37. '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',

38. footerFormat: '</table>',

39. shared: true,

40. useHTML: true

41. },

42. plotOptions: {

43. column: {

44. pointPadding: 0.2,

45. borderWidth: 0

46. }

47. },

48. credits: {

49. text: "www.stepday.com",

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

51. style: {

52. color: "red"

53. }

54. },

55. series: [{

56. name: 'Tokyo',

57. 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]

58. }]

59. }, function (chart) {

60. SetEveryOnePointColor(chart);

61. });

62. });

63.  

64. //设置每一个数据点的颜色值

65. function SetEveryOnePointColor(chart) {           

66. //获得第一个序列的所有数据点

67. var pointsList = chart.series[0].points;

68. //遍历设置每一个数据点颜色

69. for (var i = 0; i < pointsList.length; i++) {

70. chart.series[0].points[i].update({

71. color: {

72. linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果

73. stops: [

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

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

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

77. ] 

78. }

79. });

80. }

81. }

从上面的代码可以很清晰地看出，在回调函数SetEveryOnePointColor(chart)方法内时如何设置每一根柱子的渐变颜色的。

stops：表示一个颜色渐变的过程，0~1 之间表示将其柱子分割成多个部分进行设置颜色。例子中将其分割为了三部分，前后颜色一致，中间位置为白色。

setOpacity(number) 是可以设置透明度的。

这样一来我们就完成了2D柱子变3D立体效果柱子的任务了。

完整在线示例Demo查看地址：http://jsfiddle.net/stepday/zDhYN/

有什么不太明白的地方欢迎随时留言沟通，谢谢。