我要将此图表设置为HighChart中的居中位置。
我已经尝试使用以下图表代码
highcharts.chart(“容器”,{图表:{类型:“酒吧”,高度:“300”},标题:{文本:''},字幕:{文本:''},X轴:{类别:[“第1类”,“第2类”],十字准线:是的,网格线宽度:0,标题:{文本:空}},Y轴:{最小值:0,最大值:1050,网格线宽度:0,标题:{文本:“”,对齐:“高”},标签:{Overflow:“Justify”,Enabled:false}},工具提示:{ValueSuffix:“”},绘图页:{Bar:{DataLabels:{Enabled:true},ColorByPoint:true,},系列:{Shadow:true,Marker:{FillColor:“#FFFFFF”,LineWidth:1,LineColor:null,Radius:4}}},图例:{Layout:'Vertic',Align:“Right”,VerticaAlign:“Top”,X:-40,Y:80,Floating:true,
您应该能够通过使用chart.update
特性和在加载全屏模式时更改MarginLeft
值来实现该目标。
演示:https://jsfiddle.net/blacklabel/y3g7e6s0/
events: {
render() {
const chart = this;
if (chart.fullscreen.isOpen && chart.updateFlag) {
const width = chart.chartWidth;
chart.updateFlag = false;
chart.update({
chart: {
marginLeft: width / 2
}
})
chart.updateFlag = true;
} else if (chart.updateFlag) {
chart.updateFlag = false;
chart.update({
chart: {
marginLeft: initialPlotLeft
}
})
chart.updateFlag = true;
}
},
load() {
initialPlotLeft = this.plotLeft;
}
}
API:https://api.highcharts.com/highcharts/chart.events.render
API:https://api.highcharts.com/highcharts/chart.marginleft
API:https://api.highcharts.com/class-reference/highcharts.chart#更新