Highcharts v9.2.1开启Styled Mode后上下文菜单导出图片全黑问题

问题原因 #

Highcharts 开启 Styled Mode 后，所有图表样式完全由 CSS 规则控制，而默认使用的官方导出服务在渲染导出文件时，无法获取你业务页面内引入的自定义 CSS 和 Highcharts 官方样式文件，缺少样式规则的图表元素会默认渲染为黑色，最终出现全黑导出图的问题。

解决方案 #

在图表配置中新增 exporting 字段，将所有需要用到的 CSS 规则直接传入导出配置，让导出服务器能读取到对应的样式：

修改后的JS代码示例 #

$(function() {
  // 先定义所有需要用到的CSS内容，包含官方样式和自定义样式
  const exportCSS = `
@import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-color-0 {
  fill: #FF9933;
  stroke: #FF9933;
}
.highcharts-axis.highcharts-color-0 .highcharts-axis-line {
  stroke: #FF9933;
}
.highcharts-axis.highcharts-color-0 text {
  fill: #FF9933;
}
.highcharts-color-1 {
  fill: #91C400;
  stroke: #91C400;
}
.highcharts-axis.highcharts-color-1 .highcharts-axis-line {
  stroke: #91C400;
}
.highcharts-axis.highcharts-color-1 text {
  fill: #91C400;
}
.highcharts-yaxis .highcharts-axis-line {
  stroke-width: 2px;
}
  `
  // Create the chart
  Highcharts.chart('container', {
    lang: {
      printChart: 'Skriv ut diagram',
      downloadPNG: 'Ladda ner PNG',
      downloadJPEG: 'Ladda ner JPEG',
      downloadPDF: 'Ladda ner PDF',
      downloadSVG: 'Ladda ner SVG',
      contextButtonTitle: 'Innehålls meny'
    },
    // 新增导出配置
    exporting: {
      css: exportCSS,
      sourceWidth: 800,
      sourceHeight: 400
    },
    chart: {
      type: 'column',
      styledMode: true
    },
    title: {
      text: 'ADL'
    },
    xAxis: {
      categories: [
        'Hygien',
        'Tandborstning',
        'Klädsel, efter aktivitet och årstid',
        'Tidspassning',
        'Hushålla med egen ekonomi',
        'Uppträdande vid matbordet',
        'Uppträdande i sällskapsrummen',
        'Uppträdande vid aktivitet',
        'Städning av bostadsrummet',
        'Prylordning',
        'Klädvård',
      ],
      crosshair: true
    },
    yAxis: [{
        max: 4,
        tickPositions: [0, 1, 2, 3, 4],
        className: 'highcharts-color-0',
        title: {
          text: ''
        }
      },
      {
        className: 'highcharts-color-1',
        opposite: true,
        title: {
          text: ''
        }
      }
    ],
    plotOptions: {
      column: {
        borderRadius: 5
      }
    },
    series: [{
      name: "Personal skattar",
      data: [4.0000,
        3.3333,
        2.0000,
        4.0000,
        4.0000,
        0,
        0,
        0,
        0,
        0,
        0,
      ]
    }, {
      name: "Klient skattar",
      data: [2.0000,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
      ],
    }]
  });
});

补充说明 #

如果使用私有部署的 Highcharts 导出服务，也可以直接将样式文件部署到导出服务器的静态资源目录，就不用每次在配置中传入完整CSS内容。

内容的提问来源于stack exchange，提问作者MD ANWAR JAHID