提问者:小点点

如何在highchart中设置全屏视图中的居中图表


我要将此图表设置为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,


共1个答案

匿名用户

您应该能够通过使用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#更新