zoukankan      html  css  js  c++  java
  • HighCharts常用设置

    1. X轴文字斜着放,在xAxis里设置

    xAxis: {
                    labels: {
                        rotation: -90   //竖直放
                        rotation: -45   //45度倾斜
                    }
                }

    2. 柱形图柱形的宽度和边框, 在plotOptions里设置 

    plotOptions: {
        column: {
                    pointWidth: 30,     //设置柱形的宽度 
            borderWidth: 0      //设置柱子的边框,默认是1
        }
    }

    3.柱形图柱子的颜色,可以统一设置,也可以分开设置, 在series里设置

    <span style="color:#E53333;"></span>//统一设置,可以在highcharts.js里设置默认值,也可以针对一个柱形图来设置
    series: [{
        color:'#f00',   //柱形图颜色统一设为红色
        data:[11,12,13,14,15,16,17]
    }]
     
    //分开设置,每个柱子颜色不一样,需要把颜色值存到数据库里
    series: [{
                    data: [{'color':'#F6BD0F','y':11},
                                {'color':'#AFD8F8','y':12},
                                {'color':'#8BBA00','y':13},
                                {'color':'#FF8E46','y':14},
                                {'color':'#008E8E','y':15},
                                {'color':'#D64646','y':16},
                                {'color':'#8E468E','y':17}], 
                }]

    4.Y轴的值不能为小数、且按固定数值来等分, 在yAxis里设置 

    yAxis: { 
        min: 0,                  //不显示负数 
        allowDecimals:false,     //不显示小数
        tickInterval: 1         //Y轴值按1来等分
    }

    5.柱形图每个Y轴值显示柱子上的位置, 在series的dataLabels里设置 

    //显示在柱子的正上方
    series: [{
        data:[11,12,13,14,15,16,17],
        dataLabels: {
            enabled: true,    //默认是false,即默认不显示数值
            color: '#666',    //字体颜色
            align: 'center'   //居柱子中间
       }
    }]
     
    //显示在柱子上
    //在上面基础上再加一个属性,y:20,就是设置数值显示的位置

    6.图例说明,默认显示在下面,如果要显示在右边,

    //整体即显示在区域右边中间
    legend: {
        layout:'vertical',         //竖直显示,默认是水平显示的
        align: 'right',            //图例说明在区域的右边,默认在中间
        verticalAlign: 'middle'    //竖直方向居中,默认在底部
    }
  • 相关阅读:
    微软产品的安全漏洞
    C++中的访问级别
    不是每一滴牛奶都叫特伦苏
    友元关系
    友元关系
    C++中的访问级别
    基类和子类
    基类和子类
    《那些年啊,那些事——一个程序员的奋斗史》——63
    《那些年啊,那些事——一个程序员的奋斗史》——66
  • 原文地址:https://www.cnblogs.com/babietongtianta/p/4543132.html
Copyright © 2011-2022 走看看