码迷,mamicode.com
首页 > 其他好文 > 详细

HighCharts常用设置

时间:2015-06-01 09:29:25      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

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‘    //竖直方向居中,默认在底部
}

 

HighCharts常用设置

标签:

原文地址:http://www.cnblogs.com/babietongtianta/p/4543132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!