highcharts柱状图设置颜色渐变的效果
2015-06-12 14:55
225 查看
//定义一个全局颜色数组 var colorArr = ['#FD6F78', '#FBD064', '#BDDB5E']; $(function () { $('#container').highcharts({ chart: { type: 'column', borderWidth: 0, plotBorderWidth: 0 }, title: { text : '<span style="font-weight:bold;font-size:12px;">实时资金总流入</span><span style="color:red;font-size:12px;font-weight:bold;">2532</span><span style="font-weight:bold;font-size:12px;">万</span>' }, legend : { enabled : false }, xAxis: { categories: ['主力<br/>净流入','中单<br/>净流入','小单<br/>净流入'], lineWidth : 1 }, yAxis: { enabled:false, title: { text: ' ' }, labels :{ enabled : false } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.1, borderWidth: 0.1, borderColor : "#000" } }, credits: { enabled : false }, series: [{ name: ' ', data: [49.9, -71.5, -106.4], dataLabels: { enabled: true, color : "#F00" } }] }, function (chart) { SetEveryOnePointColor(chart); }); }); //设置每一个数据点的颜色值 function SetEveryOnePointColor(chart) { //获得第一个序列的所有数据点 var pointsList = chart.series[0].points; //遍历设置每一个数据点颜色 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)'] ] } }); } }
相关文章推荐
- Uva - 12096 - The SetStack Computer
- apktool,smali,dex2jar
- 不错的H5效果
- 组合模式的一个案例说明
- bitmap 设置图片尺寸,避免 内存溢出 OutOfMemoryError的优化方法
- bootm命令
- 复制读写规则
- BZOJ1052【树状数组】
- 任务计划程序设置软件在电脑重启后启动
- HDU3930 (原根)
- java map遍历
- Android Studio 格式化代码
- openstack neutron必读基础知识(转)
- jQuery判断checkbox是否选中的3种方法
- Struts在jsp页面中的一些运用
- Linux启动与关闭WIndows服务记录
- C#使用Region对图形区域构造和填充的方法
- YII2-数据查询Active Record方法
- Android圆环形自定义进度条控件的绘制
- JPA的查询语言—JPQL的命名查询@NamedQuery