highcharts - 如何在highchart的全屏视图中将图表设置在中心

Question

我想将此图表设置为在 highchart 中居中。

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

Highcharts.chart('container', {
        chart: {
            type: 'bar',
            height: '300'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ["category 1","category 2"],
            crosshair: true,
            gridLineWidth: 0,
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            max: 1050,
            gridLineWidth: 0,
            title: {
                text: '',
                align: 'high'
            },
            labels: {
                overflow: 'justify',
                enabled: false
            }
        },
        tooltip: {
            valueSuffix: ' '
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                },
                colorByPoint: true,
            },
            series: {
                shadow: true,
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 1,
                    lineColor: null,
                    radius: 4
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
            enabled: false
        },
        credits: {
            enabled: false
        },
        colors: color_codes,
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: ["viewFullscreen", "printChart",
                        "downloadPNG",
                        "downloadJPEG",
                        "downloadPDF",
                        "downloadSVG",
                        "downloadCSV",
                        "downloadXLS"]
                }
            }
        },
        series: [{
            name: '',
            data: [10,20]
        }
        ]
    });

标签： highcharts

Answer 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#update