关于Highcharts你可能想知道的设置
关于Highcharts你可能想知道的设置
最近有接触到Highcharts，为了实现想要的效果查阅了不少资料。下面举个栗子，该栗子中可设置图表显示大小、标签位置、设置数据标签的背景透明度、标签边框大小、标签大小、标签字体大小、标签透明的、显示隐藏、标签数值格式化、颜色等。下面放上代码：
var chart2 = {
tooltip: {
borderColor: '#000000'
},
chart: {
type: 'column',
animation: false,
height: 250, //控制图大小
width:280,
backgroundColor: 'rgba(0,0,0,0)'
},
title: {
text: null
},
subtitle: {
text: '单位：MB',
align: 'right',
floating: true,
verticalAlign: "top", //控制位置
x: 0
},
xAxis: {
},
yAxis: {
title: {
text: null
},
visible: false,
},
plotOptions: {
column: {
dataLabels: {
enabled: true, // 开启数据标签
color: "333333",
crop: false
},
pointWidth: 10,
enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
},
// tooltip : {
// pointFormat : ' {point.y:.2f}'
// },
series: {
events: {
legendItemClick: function(mmm) {
for (var i = 0; i < chart2.series.length; i++) {
chart2.series[i].hide();
}
var visibility = this.visible ? 'visible' : 'hidden';
}
},
dataLabels: {
enabled: true,
verticalAlign: "middle",//数值显示位置
align: "center",
borderRadius: 0,
backgroundColor: 'rgba(0, 0, 0, 0)', //设置标签背景透明
borderWidth: 0, //标签边框大小
color: "#666",
borderColor: '#5799d4',
y: -25,
borderHeight: 0,
shadow: false,
format : '{point.y:.2f}', //保留小数点后两位，实现小数点后的0也显示
style: {
weight:'10px', //标签框大小
height:'4px',
left:0,
padding:0,
visibility:'visible', //可见
opacity:'1', //透明度
fontWeight:'8px', //标签字体大小
fontHeight:'4px',
fontSize: '3px'
}
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: '近半年'
}]
};
