• highcharts常用参数设置


    面积图

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

    item.highcharts({
    chart: {
    type: 'areaspline',
    zoomType:'x',
    //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,
    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: {
    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,
    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="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]
    ]
    }]
    });

    });
  • 相关阅读:
    XIX Open Cup, Grand Prix of China【杂题】
    开发自己的composer包
    IOS微信禁用分享跳转页面返回BUG修复
    Pytest Fixture(一)
    Python使用requests和requests_toolbelt上传文件
    Pytest之参数化
    Pytest Fixture(三)
    Pytest 多进程并发执行
    Pytest Fixture(二)
    20212923 202120222 《网络攻防实践》第二次作业
  • 原文地址:https://www.cnblogs.com/lr-blog/p/5140244.html
Copyright © 2020-2023  润新知