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

 
//定义一个全局颜色数组
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)']
                                ]  
                    }
                });
            }
        }

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页