1.柱状图上显示数据
plotOptions: {
column: {
borderWidth: 0,
dataLabels: {
enabled: true //柱状图上显示数据
}
}
}
2.去掉1,2位置
//去除右下角highchart.com
credits: {
enabled:false
}
//去除右上角图标
exporting: {
enabled:false
}
3.修改柱状图颜色
colors:[
'#000000','#FF0000'
]
4.修改主题
<script src="https://code.highcharts.com.cn/highcharts/themes/sand-signika.js"></script>
刷新就可以了
自定义主题参考官网
5.修改图中字体大小
注意:字体样式里除了改大小,还可以修改颜色(color),字体(fontFamily)
标题:
title: {
text: "重点班",
style: {
fontSize: '30px',
color: 'red' //这边是改标题的字体大小和颜色
}
}
图上数据:
dataLabels: {
enabled: true, //设置显示对应y的值
style: {
fontSize: "20px" //图上显示(柱状图上方)
}
}
y坐标系:
yAxis: {
min: 0,
title: {
text: "数量"
},
labels: {
style: {
fontSize: "69px"
}
}
}
x坐标系:
xAxis: {
categories: [ "一班", "二班", "三班", "四班"],
crosshair: true,
labels: {
style: {
fontSize: "98px"
}
}
}
y坐标系标题:
yAxis: {
min: 0,
title: {
text: "数量",
style: {
fontSize: "30px",
color: "red" //改标题的字体大小和颜色
}
}
}
图例:
legend: {
itemStyle: {
fontSize: "88px"
}
}
6.highcharts数据标签显示在柱状图里面解决办法
plotOptions: {
column: {
borderWidth: 0,
pointWidth:50, //柱子宽度
dataLabels: {
crop:false,//解决问题的方法
overflow: 'none',//解决问题的方法
enabled: true, //设置显示对应y的值
}
}