如何实现Highcharts旭日图A0/A1尺寸打印时保持文字大小不变？

核心思路 #

通过CSS媒体查询针对打印场景单独设置样式：让图表容器整体缩放适配A1/A0纸张尺寸，同时强制固定文字的像素大小，避免文字随容器缩放而放大溢出，兼顾图表完整性和文字可读性。

具体实现步骤 #

1. 给图表容器添加专属类名
   为了精准定位旭日图容器，给它加上print-sunburst类：

   <div class="print-sunburst" id="sunburst-chart"></div>
   

2. 编写打印专用CSS规则
   使用@media print媒体查询，仅在打印时生效：

   @media print {
     /* 隐藏页面其他无关元素，只保留图表 */
     body > *:not(.print-sunburst) {
       display: none !important;
     }
   
     /* 设置图表容器占满打印页面，调整缩放比例适配大尺寸纸张 */
     .print-sunburst {
       width: 100% !important;
       height: 100vh !important;
       transform: scale(0.75); /* 按需调整缩放值，确保图表完整显示 */
       transform-origin: top left;
       page-break-inside: avoid;
     }
   
     /* 强制固定所有图表文字的大小，覆盖默认缩放效果 */
     .print-sunburst .highcharts-data-label,
     .print-sunburst .highcharts-axis-labels,
     .print-sunburst .highcharts-title,
     .print-sunburst .highcharts-subtitle {
       font-size: 11px !important; /* 根据可读性调整，建议10-14px */
       transform: scale(1) !important; /* 重置文字自身缩放，保持原大小 */
     }
   
     /* 配置打印页面参数 */
     @page {
       size: A1 landscape; /* 切换为A0可替换成A0 */
       margin: 1cm; /* 设置页面边距，避免内容被裁剪 */
     }
   }
   

3. 配合Highcharts配置双重保障
   在图表初始化时，通过打印前后的事件调整文字样式，进一步强化控制：

   Highcharts.chart('sunburst-chart', {
     chart: {
       type: 'sunburst',
       events: {
         beforePrint: function() {
           // 打印前临时设置文字大小
           this.update({
             plotOptions: {
               sunburst: {
                 dataLabels: { style: { fontSize: '10px' } }
               }
             },
             title: { style: { fontSize: '12px' } }
           });
         },
         afterPrint: function() {
           // 打印后恢复原样式
           this.update({
             plotOptions: {
               sunburst: {
                 dataLabels: { style: { fontSize: null } }
               }
             },
             title: { style: { fontSize: null } }
           });
         }
       }
     },
     // 其他旭日图配置项...
   });
   

调试要点 #

• 缩放比例transform: scale(0.75)需要根据图表内容多少和纸张尺寸微调，确保整个旭日图能完整显示在页面内。
• 文字大小可多次打印测试，找到清晰且不溢出的平衡点。

内容的提问来源于stack exchange，提问作者Ed James