关于Highcharts你可能想知道的设置
程序员文章站
2022-06-11 09:45:50
...
关于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 : ' <b>{point.y:.2f}</b>' // }, 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: '近半年' }] };
实现效果图: