highcharts 柱状图颜色渐变

来源：互联网发布：怎么看本机端口号编辑：程序博客网时间：2024/05/16 05:03
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><script src="js/highcharts.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box" style="width: 600px;height: 600px;border: 1px solid #333333;"></div><script type="text/javascript">//定义一个全局颜色数组  var colorArr = ['red', 'orange', 'blue'];      //先写好静态图表，series中的color不要设置  var chart=Highcharts.chart('box',{  title: {                text: null            },            xAxis: {                categories: [ '合同额', '计量额', '签证额'],                labels: {                    style: {                        fontSize: '10px',                        fontWeight: 'bold',                        fontFamily: 'Microsoft YaHei'                    }                }            },            yAxis: {                min: 0,                title: {                    text: '金额(元)'                }            },            legend: {                enabled: false            },            plotOptions: {                series: {                    pointPadding: 0.2,                    cursor: 'pointer',                    events: {                        click: function (e) {                            var PrjId = $.session.get('PrjId');                            var PrjNamee = $.session.get('PrjNamee');                            url = "/App/AppV3/Viewform.aspx?UserCode=" + usercode + "&PrjGuid=" + PrjId + "&PrjName=" + PrjNamee + "&Type=KPIReport";                            window.location.href = url;                        }                    }                },                dataLabels: {                    enabled: false,                    format: '{point.y:.2f}元'                }            },            labels: {                items: [{                    style: {                        left: '300px',                        top: '-20px',                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'                    }                }]            },            tooltip: {                headerFormat: '<span style="font-size:11px">{point.key}',                pointFormat: '<b>{point.y}元</b>',                footerFormat: '</span>'            },            series: [{                type: 'column',                data: [49.9, 71.5, 106.4]            }]  },            function (chart) {                  SetEveryOnePointColor(chart);              } );                //设置每一个数据点的颜色值          function SetEveryOnePointColor(chart) {                          //获得第一个序列的所有数据点              var pointsList = chart.series[0].points;            //console.log(pointsList);            //遍历设置每一个数据点颜色              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)']                                  ]                        }                  });              }          }  </script></body></html>
阅读全文
1 0