如何设置HighCharts图表导出时的指定高度与宽度？

我懂你遇到的糟心情况——明明在exporting配置里写了height和width，但导出的地图尺寸就是跟设置的对不上。这是因为Highcharts的地图图表（mapChart）在导出时，默认会沿用图表容器的实际尺寸，直接设置exporting.height和width有时候会被容器尺寸的优先级盖过去。

解决方案：添加sourceWidth和sourceHeight参数 #

要让导出文件严格遵循你指定的尺寸，得在exporting配置里同时加上sourceWidth和sourceHeight。这两个参数会告诉Highcharts，导出时用你定义的基础尺寸来渲染图表，再配合width和height就能精准控制最终导出结果的大小了。

修改后的完整配置示例：

var chart = Highcharts.mapChart('container', {
  title: {
    text: 'USA 2016 Presidential Election Results'
  },
  chart: {
    animation: false
  },
  exporting: {
    sourceWidth: 700,  // 导出渲染时使用的图表基础宽度
    sourceHeight: 200, // 导出渲染时使用的图表基础高度
    width: 700,        // 最终导出图片的宽度
    height: 200        // 最终导出图片的高度
  },
  // 其他图表相关配置...
});

原理说明 #

• sourceWidth和sourceHeight：负责定义导出过程中Highcharts渲染图表的画布尺寸，会直接覆盖容器的实际尺寸，确保地图按你想要的比例渲染。
• width和height：最终导出图片的像素尺寸，如果这两个值和sourceWidth/sourceHeight的比例一致，就能得到无拉伸的正确尺寸；要是比例不同，图表会被拉伸适配到目标尺寸。

这么修改之后，你导出的地图就会严格按照700x200的尺寸生成啦。

内容的提问来源于stack exchange，提问作者Zee Fer