Swift iOS中HighCharts绘图区动态颜色暗黑模式切换失效如何解决

根因分析 #

• HighCharts的HIChart属性backgroundColor、plotBackgroundColor为静态赋值逻辑，初始化时传入的HIColor会被转换为固定RGBA值传递给内部渲染用的WebView，不会跟随系统暗黑模式切换自动更新，你上传的异常效果就是典型的该类问题表现
• 你设置的HIChartView的backgroundColor仅作用于原生视图层，WebView内部渲染的图表绘图区颜色不受该属性控制，必须修改HIChart实例的对应配置才会生效

可行解决方法 #

方法1：监听系统样式切换，手动刷新图表配置 #

在当前页面重写系统样式变更回调，样式切换时重新赋值图表颜色属性并刷新，适配性最高：

// 提前在Assets.xcassets里创建好适配暗黑/浅色模式的动态颜色，命名为ChartBgColor、PlotBgColor
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    // 判断是否发生暗黑模式切换
    if #available(iOS 13.0, *), traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
        // 重新生成HIChart颜色配置
        let updatedChart = HIChart()
        updatedChart.backgroundColor = HIColor(uiColor: UIColor(named: "ChartBgColor")!)
        updatedChart.plotBackgroundColor = HIColor(uiColor: UIColor(named: "PlotBgColor")!)
        // 替换原图表的chart配置
        chart.options.chart = updatedChart
        // 刷新图表渲染
        chart.reload()
    }
}

注意初始化图表时也使用动态UIColor初始化HIColor，不要写死固定RGBA值。

方法2：使用HighCharts内置媒体查询适配 #

利用Web端HighCharts支持的CSS媒体查询，直接在配置中写入暗黑模式适配规则，无需原生监听样式切换，切换模式时会自动更新：

let chart = HIChart()
// 配置样式适配暗黑/浅色模式
chart.style = HIStyle()
chart.style.css = """
@media (prefers-color-scheme: dark) {
    .highcharts-background {
        fill: #2A2A2A !important;
    }
    .highcharts-plot-background {
        fill: rgba(139, 188, 33, 0.1) !important;
    }
}
@media (prefers-color-scheme: light) {
    .highcharts-background {
        fill: #FFFFFF !important;
    }
    .highcharts-plot-background {
        fill: rgba(139, 188, 33, 0.1) !important;
    }
}
"""

注意事项 #

• 不要混合使用原生HIChartView的backgroundColor和HIChart的backgroundColor，避免出现颜色叠加异常
• 动态颜色需要在Assets.xcassets中配置好对应的浅色、暗黑模式色值，保证取值正确

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