Highcharts 中文社区

 找回密码
 立即注册
查看: 4809|回复: 1

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

[复制链接]
  • TA的每日心情
    擦汗
    2015-8-10 18:01
  • 签到天数: 90 天

    [LV.6]常住居民II

    3

    主题

    53

    帖子

    1239

    积分

    HC 高手

    Rank: 4

    积分
    1239

    最佳新人

    QQ
    发表于 2015-1-7 18:45:35 | 显示全部楼层 |阅读模式
       为了让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: '<span style="font-size:10px">{point.key}</span><table>',
    33.                     pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    34.                     '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    35.                     footerFormat: '</table>',
    36.                     shared: true,
    37.                     useHTML: true
    38.                 },
    39.                 plotOptions: {
    40.                     column: {
    41.                         pointPadding: 0.2,
    42.                         borderWidth: 0
    43.                     }
    44.                 },
    45.                 credits: {
    46.                     text: "www.stepday.com",
    47.                     href: "http://www.stepday.com",
    48.                     style: {
    49.                         color: "red"
    50.                     }
    51.                 },
    52.                 series: [{
    53.                     name: 'Tokyo',
    54.                     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]
    55.                 }]
    56.             }, function (chart) {
    57.                 SetEveryOnePointColor(chart);
    58.             });
    59.         });

    60.                 //设置每一个数据点的颜色值
    61.         function SetEveryOnePointColor(chart) {            
    62.             //获得第一个序列的所有数据点
    63.             var pointsList = chart.series[0].points;
    64.             //遍历设置每一个数据点颜色
    65.             for (var i = 0; i < pointsList.length; i++) {
    66.                 chart.series[0].points[i].update({
    67.                     color: {
    68.                         linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
    69.                         stops: [
    70.                                     [0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
    71.                                     [0.5, 'rgb(255, 255, 255)'],
    72.                                     [1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
    73.                                 ]  
    74.                     }
    75.                 });
    76.             }
    77. }
    复制代码

    从上面的代码可以很清晰地看出,在回调函数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循环分别设置每个数据列的颜色,这样就可以了。

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



    本帖被以下淘专辑推荐:

  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    21330

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2015-1-7 23:14:16 | 显示全部楼层
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表