如何无需手动调整字体将Highcharts图表缩小至原尺寸50%并生成副本？

方法1：CSS Transform 整体缩放 #

这是最贴合“截图后直接缩小”效果的方案，通过CSS的transform: scale()属性直接对图表容器进行整体缩放，所有元素（包括标题、坐标轴文字、图例等）会自动按比例缩小，无需修改Highcharts任何配置：

/* 假设图表容器的类名为highcharts-container */
.highcharts-container {
  transform: scale(0.5);
  transform-origin: top left; /* 从左上角开始缩放，避免位置偏移 */
  /* 可选：如果需要容器实际占位尺寸也缩小，补充以下设置 */
  width: 50% !important;
  height: 50% !important;
}

注意：不设置width和height时，容器占位空间仍为原尺寸，但视觉呈现是缩小状态；添加!important是为了覆盖Highcharts自动生成的容器尺寸样式。

方法2：Highcharts导出时设置缩放比例 #

如果需求是导出缩小后的图表图片，无需前端实时显示调整，可以直接在Highcharts配置中设置导出缩放参数，导出的图片会自动按比例缩小所有元素：

Highcharts.chart('container', {
  // 其他图表配置项...
  exporting: {
    scale: 0.5 // 导出时直接缩至原尺寸的50%
  }
});

导出后的图片效果和截图缩小完全一致，字体、线条、图形等所有元素均按比例同步缩小。

方法3：全局样式同步缩放（备选） #

如果不想使用transform，可以通过修改Highcharts全局基础字体大小，配合容器尺寸缩小实现同步缩放：

// 初始化前修改Highcharts全局文本样式
Highcharts.setOptions({
  chart: {
    style: {
      fontSize: '8px' // 假设原默认字体为16px，直接设为一半
    }
  },
  title: {
    style: {
      fontSize: '12px' // 原标题字体24px的话，同步设为一半
    }
  },
  // 坐标轴、图例等其他文本元素同理，按原尺寸比例缩小字体
});

// 设置图表容器尺寸为原尺寸的50%
Highcharts.chart('container', {
  chart: {
    width: 400, // 原宽度800则设为400
    height: 300 // 原高度600则设为300
  },
  // 其他图表配置项...
});

不过这种方法需要手动对应各文本元素的字体大小，不如CSS transform便捷，仅适合需要精确控制单元素样式的场景。

关于工具库 #

无需额外第三方工具库，上述方法均基于CSS或Highcharts自身API即可实现，完全满足需求。

内容的提问来源于stack exchange，提问作者Alla Sorokina