highcharts常用参数设置

Posted 2020-07-09 THE BEST GIFT

面积图

var categories= [
    ‘前5日‘,
    ‘前4日‘,
    ‘前3日‘,
    ‘前2日‘,
    ‘前1日‘,
    ‘后1日‘,
    ‘后2日‘,
    ‘后3日‘,
    ‘后4日‘,
    ‘后5日‘
];

item.highcharts({
    chart: {
        type: ‘areaspline‘,
        zoomType:‘x‘,
        //width:670,
        height:260,
        backgroundColor:‘#fcfcfc‘
        //padding:0
    },
    colors:[‘#65b5f3‘,‘#ff9399‘,‘#cdcdcd‘],
    exporting:{
        enabled:false
    },
    title: {
        text: ‘‘
    },

    legend: {
        enabled:false,
        //layout: ‘horizon‘,
        align: ‘left‘,
        verticalAlign: ‘top‘,
        x: 300,
        y: -10,
        floating: true,
        //borderWidth: .1,
        //backgroundColor: ‘#FFFFFF‘,
        //margin:14,
        symbolWidth:14,
        symbolHeight:3,
        //padding:10,
        width:300
    },
    xAxis: {
        lineColor:"#efefef",
        tickLength:0,
        color:‘#8d8d8d‘,
        labels:{
            style:{
                color:"#8d8d8d"
            },
            formatter:function(){
                return categories[this.value];
            }
        },
        min:0,
        max:8
        //tickInterval:1
    },
    yAxis: {
        title: {
            text: ‘‘
        },
        lineWidth:1,
        gridLineWidth:1,
        allowDecimals:true,
        tickInterval:1,
        tickColor:‘red‘,
        gridLineColor:‘#efefef‘,
        lineColor:"#efefef",
        labels:{
            style:{
                color:"#8d8d8d"
            }
        },
        max:limit.max,
        min:limit.min
    },
    tooltip: {
        shared: true,
        valueSuffix: ‘ units‘,
        backgroundColor:‘#2c3238‘,
        crosshairs: {
            width: 1,
            color: ‘#777‘,
            dashStyle: ‘dash‘
        },
        style:{
            color:‘#fff‘
        },
        formatter:function(){
            var data = this.points;
            var html = "";
            for(var i = 0 ; i < data.length; i++){
                html+= "<span style=‘color:#fff‘>"+data[i].series.name+":"+data[i].y+"%</span><br>";
            }
            return html;
        }
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.2,
            lineWidth:1,
            marker:{
                states:{
                    hover:{
                        enabled:false
                    }
                }
            }
        },
        series : {
            marker:{
                enabled:false
            },
            states:{
                hover:{
                    lineWidth:1
                }
            }
        },
        area:{
            marker:{
                states:{
                    hover:{
                        lineWidth:1
                    }
                }
            }
        }
    },
    series:data
});

饼图：

$(function () {
    var chartnumTimer;
    $("#srfx").highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            width:130,
            height:136,
            backgroundColor:null
        },
        colors:[‘#fbd562‘,‘#92be0f‘,‘#ff9755‘,‘#fbd562‘,‘#b3daf8‘],
        title: {
            text: ‘‘
        },
        tooltip: {
            borderColor:null,
            borderWidth:0,
            useHTML:true,
            shadow:false,
            backgroundColor:null,
            hideDelay:0,
            positioner:function(){
                return {
                    x:13,
                    y:30
                }
            },
            //pointFormat: ‘<b>{point.percentage:.1f}%</b>‘
            formatter:function(data){
                return ‘<div class="chart_for">‘+this.point.percentage.toFixed(2)+‘<b style="font-size: 14px;">%</b></div><div style="width:92px;text-align: center;font-family: Simsun">‘+this.point.name+‘</div>‘
            }
        },
        exporting:{
            enabled:false
        },
        credits:{
            enabled:false
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: ‘pointer‘,
                size:130,
                innerSize:100,
                shadow:false,
                states:{
                    hover:{
                        enabled:false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                point:{
                    events:{
                        mouseOver:function(){
                            var box = $(‘.init_info‘);
                            var num = this.percentage.toFixed(2);
                            box.fadeOut(0).find(".num").html(num);
                            box.find(".name").html(this.name);
                            clearTimeout(chartnumTimer);
                        },
                        mouseOut:function(){
                            chartnumTimer = setTimeout(function(){
                                $(‘.init_info‘).show();
                            },0);
                        }
                    }
                }
            }
        },
        series: [{
            type: ‘pie‘,
            name: ‘Browser share‘,
            data: [
                //[‘利息收入‘,32],
                {
                    name:‘利息收入‘,
                    y:32,
                    selected:true
                },
                [‘发放贷款和垫款‘,16],
                [‘发放贷款和垫款‘,32],
                [‘发放贷款和垫款‘,32],
                [‘发放贷款和垫款‘,5]
            ]
        }]
    });

});