HighCharts常用设置

看到社区里有很多关于highcharts的问题,我做的时候也常来找答案,下面把前两周的问题整理出来:

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

1 xAxis: {
2                 labels: {
3                     rotation: -90   //竖直放
4                     rotation: -45   //45度倾斜
5                 }
6             }
2. 柱形图柱形的宽度和边框,  在plotOptions里设置  
1 plotOptions: {
2     column: {
3                 pointWidth: 30,     //设置柱形的宽度
4         borderWidth: 0      //设置柱子的边框,默认是1
5     }
6 }
3.柱形图柱子的颜色,可以统一设置,也可以分开设置,  在series里设置
01 "color:#E53333;">//统一设置,可以在highcharts.js里设置默认值,也可以针对一个柱形图来设置
02 series: [{
03     color:'#f00',   //柱形图颜色统一设为红色
04     data:[11,12,13,14,15,16,17]
05 }]
06  
07 //分开设置,每个柱子颜色不一样,需要把颜色值存到数据库里
08 series: [{
09                 data: [{'color':'#F6BD0F','y':11},
10                             {'color':'#AFD8F8','y':12},
11                             {'color':'#8BBA00','y':13},
12                             {'color':'#FF8E46','y':14},
13                             {'color':'#008E8E','y':15},
14                             {'color':'#D64646','y':16},
15                             {'color':'#8E468E','y':17}],
16             }]
4.Y轴的值不能为小数、且按固定数值来等分,  在yAxis里设置  
1 yAxis: {
2     min: 0,                  //不显示负数
3     allowDecimals:false,     //不显示小数
4     tickInterval: 1         //Y轴值按1来等分
5 }
5.柱形图每个Y轴值显示柱子上的位置,  在series的dataLabels里设置  
view source
print ?
01 //显示在柱子的正上方
02 series: [{
03     data:[11,12,13,14,15,16,17],
04     dataLabels: {
05         enabled: true,    //默认是false,即默认不显示数值
06         color: '#666',    //字体颜色
07         align: 'center'   //居柱子中间
08    }
09 }]
10  
11 //显示在柱子上
12 //在上面基础上再加一个属性,y:20,就是设置数值显示的位置
6.图例说明,默认显示在下面,如果要显示在右边, 
1 //整体即显示在区域右边中间
2 legend: {
3     layout:'vertical',         //竖直显示,默认是水平显示的
4     align: 'right',            //图例说明在区域的右边,默认在中间
5     verticalAlign: 'middle'    //竖直方向居中,默认在底部
6 }

你可能感兴趣的:(js)