Highcharts 中文社区

 找回密码
 立即注册

如何设置柱状图柱子立体(颜色渐变)效果类似3D效果之lin...

2015-3-18 21:07| 发布者: 群大大| 查看: 6368| 评论: 1|原作者: 小菜

摘要: 为了让2D的柱状图展现更加美观和独具美感,可能客户会要求你将柱状图的柱子弄成立体效果,那样看上去就很有立体的感觉,美观度又会上升一个等级的。 因为highcharts使用svg渲染的,所以通过查询得知svg内的线性渐 ...
   为了让2D的柱状图展现更加美观和独具美感,可能客户会要求你将柱状图的柱子弄成立体效果,那样看上去就很有立体的感觉,美观度又会上升一个等级的。
    因为highcharts使用
svg渲染的,所以通过查询得知svg内的线性渐变属性为:linearGradient。


    为了让图表每一根柱子的颜色可配置,我们首先定义一个颜色数组:
  1. //定义一个全局颜色数组
  2. var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#000000','#560f23'];
复制代码

  接着我们要设置每一个柱子的linearGradient才行的,这里我们采用在图表创建的回调函数内去完成这个动态颜色切换的效果。
  1. $(function () {
  2.             $('#container').highcharts({
  3.                 chart: {
  4.                     type: 'column'
  5.                 },
  6.                 subtitle: {
  7.                     text: 'Source: www.stepday.com'
  8.                 },
  9.                 xAxis: {
  10.                     categories: [
  11.                     'Jan',
  12.                     'Feb',
  13.                     'Mar',
  14.                     'Apr',
  15.                     'May',
  16.                     'Jun',
  17.                     'Jul',
  18.                     'Aug',
  19.                     'Sep',
  20.                     'Oct',
  21.                     'Nov',
  22.                     'Dec'
  23.                 ]
  24.                 },
  25.                 yAxis: {
  26.                     min: 0,
  27.                     title: {
  28.                         text: 'Rainfall (mm)'
  29.                     }
  30.                 },
  31.                 tooltip: {
  32.                     headerFormat: '{point.key}',
  33.                     pointFormat: '
  34. ' +
  35.                     '
  36. ',
  37.                     footerFormat: '
  38. {series.name}: {point.y:.1f} mm
    ',
  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.         function SetEveryOnePointColor(chart) {            
  65.             //获得第一个序列的所有数据点
  66.             var pointsList = chart.series[0].points;
  67.             //遍历设置每一个数据点颜色
  68.             for (var i = 0; i < pointsList.length; i++) {
  69.                 chart.series[0].points[i].update({
  70.                     color: {
  71.                         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
  72.                         stops: [
  73.                                     [0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
  74.                                     [0.5, 'rgb(255, 255, 255)'],
  75.                                     [1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
  76.                                 ]  
  77.                     }
  78.                 });
  79.             }
  80. }
复制代码

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

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

效果图:(参见效果图)

效果图


注:  以上为网络资源。


如果是过个数据列,要实现如效果图2(参见效果图2)

效果图2.png

的效果,则需要做的更改为:


  1. //设置每一个数据点的颜色值
  2.         function SetEveryOnePointColor(chart) {            
  3.             //获得三个序列的所有数据点
  4.             var pointsList = chart.series[0].points;
  5.             var pointsList1 = chart.series[1].points;
  6.             var pointsList2 = chart.series[2].points;
  7.             //遍历设置每一个数据点颜色
  8.             for (var i = 0; i < pointsList.length; i++) {
  9.                 chart.series[0].update({
  10.                     color: {
  11.                         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
  12.                         stops: [
  13.                                     [0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
  14.                                     [0.5, 'rgb(255, 255, 255)'],
  15.                                     [1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
  16.                                 ]  
  17.                     }
  18.                 });
  19.             }
  20.             
  21.             //遍历设置每一个数据点颜色
  22.             for (var i = 0; i < pointsList1.length; i++) {
  23.                 chart.series[1].update({
  24.                     color: {
  25.                         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
  26.                         stops: [
  27.                                     [0, Highcharts.Color(colorArr[5]).setOpacity(1).get('rgba')],
  28.                                     [0.5, 'rgb(255, 255, 255)'],
  29.                                     [1, Highcharts.Color(colorArr[5]).setOpacity(1).get('rgba')]
  30.                                 ]  
  31.                     }
  32.                 });
  33.             }
  34.             
  35.             //遍历设置每一个数据点颜色
  36.             for (var i = 0; i < pointsList2.length; i++) {
  37.                 chart.series[2].update({
  38.                     color: {
  39.                         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
  40.                         stops: [
  41.                                     [0, Highcharts.Color(colorArr[7]).setOpacity(1).get('rgba')],
  42.                                     [0.5, 'rgb(255, 255, 255)'],
  43.                                     [1, Highcharts.Color(colorArr[7]).setOpacity(1).get('rgba')]
  44.                                 ]  
  45.                     }
  46.                 });
  47.             }
  48. }
复制代码

将其中的遍历设置每一个数据点颜色改变为三个for循环分别设置每个数据列的颜色,这样就可以了。

网络资源只是单个数据列的设置颜色,只需些许更改就可以对多个数据列的颜色进行设置,故分享。



8

路过

雷人
1

握手

鲜花
1

鸡蛋

刚表态过的朋友 (10 人)

发表评论

最新评论

引用 群大大 2015-1-7 23:14
类似的实现: http://code.hcharts.cn/hcharts.cn/hhhhQx

查看全部评论(1)

返回顶部