highcharts 柱状图颜色渐变

最新推荐文章于 2024-06-26 16:27:03 发布

请叫我龙仔c

最新推荐文章于 2024-06-26 16:27:03 发布

阅读量3.2k

点赞数 3

分类专栏： web前端 JavaScript探索者

本文链接：https://blog.csdn.net/Jnlong_vae/article/details/78782523

版权

web前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

JavaScript探索者

11 篇文章 0 订阅

订阅专栏

<!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>

请叫我龙仔c

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts 柱状图颜色渐变

//定义一个全局颜色数组 var colorArr = ['red', 'orange', 'blue']; //先写好静态图表，series中的color不要设置 var chart=Highcharts.chart('box',{ title: { text: null },
复制链接

扫一扫

专栏目录