概述
看到社区里有很多关于highcharts的问题，我做的时候也常来找答案，下面把前两周的问题整理出来：
1. X轴文字斜着放，在xAxis里设置
1 | xAxis: { |
2 | labels: { |
3 | rotation: -90 //竖直放 |
4 | rotation: -45 //45度倾斜 |
5 | } |
6 | } |
1 | plotOptions: { |
2 | column: { |
3 | pointWidth: 30, //设置柱形的宽度 |
4 | borderWidth: 0 //设置柱子的边框，默认是1 |
5 | } |
6 | } |
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 | }] |
1 | yAxis: { |
2 | min: 0, //不显示负数 |
3 | allowDecimals:false, //不显示小数 |
4 | tickInterval: 1 //Y轴值按1来等分 |
5 | } |
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，就是设置数值显示的位置 |
1 | //整体即显示在区域右边中间 |
2 | legend: { |
3 | layout:'vertical', //竖直显示，默认是水平显示的 |
4 | align: 'right', //图例说明在区域的右边，默认在中间 |
5 | verticalAlign: 'middle' //竖直方向居中，默认在底部 |
6 | } |
最后
以上就是义气摩托为你收集整理的HighCharts常用设置的全部内容，希望文章能够帮你解决HighCharts常用设置所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复