看到社区里有很多关于highcharts的问题,我做的时候也常来找答案,下面把前两周的问题整理出来:
1. X轴文字斜着放,在xAxis里设置
xAxis: {
labels: {
rotation: -90 //竖直放
rotation: -45 //45度倾斜
}
}
2. 柱形图柱形的宽度和边框, 在plotOptions里设置
plotOptions: {
column: {
pointWidth: 30, //设置柱形的宽度
borderWidth: 0 //设置柱子的边框,默认是1
}
}
3.柱形图柱子的颜色,可以统一设置,也可以分开设置, 在series里设置
//统一设置,可以在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' //竖直方向居中,默认在底部
}