Highcharts--（2）常用设置

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	<span style="color:#E53333;"></span>//统一设置，可以在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

}