如何修改react-highcharts图表高度且保持viewbox参数不变？

要将图表高度改为400，同时让生成的SVG保持viewBox="0 0 1120 325"不变，可以通过以下两步实现：

1. 修改初始配置的图表高度 #

首先把初始配置里的chart.height从325改为400：

function getInitialHighChartsConfig(chartType) {
  return {
    credits: false,
    chart: {
      type: chartType,
      height: 400, // 替换为目标高度
    },
    title: {
      text: '',
      useHTML: true,
    },
    yAxis: {
      title: {
        text: '',
      },
      allowDecimals: false,
    },
    xAxis: {
      title: {
        text: '',
      },
      allowDecimals: false,
    },
    plotOptions: {},
    series: {},
  };
}

2. 渲染后手动修正viewBox属性 #

Highcharts会自动根据图表高度调整viewBox，所以需要在图表渲染完成后，手动覆盖该属性。可以通过监听render事件实现：

方式一：初始化后添加事件监听 #

// 初始化图表
const chart = Highcharts.chart('your-chart-container', getInitialHighChartsConfig('line'));

// 每次渲染后修正viewBox
chart.addEvent(chart, 'render', function() {
  const svgElement = this.renderTo.querySelector('.highcharts-root');
  if (svgElement) {
    svgElement.setAttribute('viewBox', '0 0 1120 325');
    // 确保SVG高度保持400
    svgElement.setAttribute('height', '400');
  }
});

方式二：在初始配置中定义render事件 #

function getInitialHighChartsConfig(chartType) {
  return {
    credits: false,
    chart: {
      type: chartType,
      height: 400,
      events: {
        render: function() {
          const svgElement = this.renderTo.querySelector('.highcharts-root');
          if (svgElement) {
            svgElement.setAttribute('viewBox', '0 0 1120 325');
          }
        }
      }
    },
    title: {
      text: '',
      useHTML: true,
    },
    yAxis: {
      title: {
        text: '',
      },
      allowDecimals: false,
    },
    xAxis: {
      title: {
        text: '',
      },
      allowDecimals: false,
    },
    plotOptions: {},
    series: {},
  };
}

注意事项 #

这种修改会让SVG的显示高度（400）和内部坐标空间（viewBox定义的325高度）不一致，图表内容会自动缩放以填充SVG区域。如果需要保持内容原始尺寸、剩余空间留空，需要额外调整图表的margin或spacing参数，但此时viewBox会随容器尺寸变化，无法严格保持原值。

内容的提问来源于stack exchange，提问作者Neha Chaudhary