如何在海图中以全屏视图的中心设置图表

如何解决如何在海图中以全屏视图的中心设置图表

我想将此图表设置为高图的中心。

我尝试将以下代码用于图表

Highcharts.chart（'container'，{ 图表：{ 类型：“酒吧”， 高度：“ 300” }， 标题：{ 文字：“” }， 副标题：{ 文字：“” }， xAxis：{ 类别：[“类别1”，“类别2”]， 十字准线：是的， gridLineWidth：0， 标题：{ 文字：null } }， yAxis：{ 最小值：0， 最多：1050， gridLineWidth：0， 标题：{ 文字：“， 对齐：“高” }， 标签： { 溢出：“合理化”， 启用：false } }， 工具提示：{ valueSuffix：'' }， plotOptions：{ 酒吧：{ dataLabels：{ 已启用：true }， colorByPoint：是， }， 系列：{ 阴影：真实， 标记：{ fillColor：'#FFFFFF'， lineWidth：1 lineColor：null， 半径：4 } } }， 图例：{ 布局：“垂直”， 对齐：“正确”， verticalAlign：'top'， x：-40， y：80， 浮动：是的， borderWidth：1 背景颜色： Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF'， 启用：false }， 学分：{ 启用：false }， 颜色：color_codes， 出口：{ 纽扣： { contextButton：{ menuItems：[“ viewFullscreen”，“ printChart”， “ downloadPNG”， “ downloadJPEG”， “ downloadPDF”， “ downloadSVG”， “ downloadCSV”， “ downloadXLS”] } } }， 系列：[{ 名称： ''， 数据：[10,20] } ] }）;

解决方法

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