highcharts柱状图设置颜色渐变的效果

 
//定义一个全局颜色数组
var colorArr = ['#FD6F78', '#FBD064', '#BDDB5E'];

$(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column',
                    borderWidth: 0,
                    plotBorderWidth: 0
                },
                title: {
                    text : '实时资金总流入2532'
                },
                legend : {
                    enabled : false
                },
                xAxis: {
                    categories: ['主力
净流入','中单
净流入','小单
净流入'], lineWidth : 1 }, yAxis: { enabled:false, title: { text: ' ' }, labels :{ enabled : false } }, tooltip: { headerFormat: '{point.key}', pointFormat: '' + '', footerFormat: '
{series.name}: {point.y:.1f}
', 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)'] ] } }); } }

你可能感兴趣的:(技术总结)