ApexCharts 3.44版在QuickChart中使用十六进制颜色报错

问题现象 #

在ApexCharts 3.44版本的热力图配置中，当在plotOptions.heatmap.colorScale.ranges内指定十六进制颜色代码时，会触发以下报错：

Error: Evaluation failed: TypeError: Cannot read property 'dataURI' of undefined at puppeteer_evaluation_script:2:52

若改用black、red这类颜色名称字符串，虽不会报错，但图表背景会异常变为灰色。

解决方案 #

1. 调整useFillColorAsStroke配置 #

该版本中useFillColorAsStroke: true与十六进制颜色的组合存在兼容性问题，尝试移除或关闭该配置：

plotOptions: {
    heatmap: {
        radius: 5,
        colorScale: {
            ranges: [
                { name: 'asd', from: 0, to: 50, color: "#000000" },
                { name: 'samad', from: 51, to: 100, color: "#dddddd" },
                { name: 'samad', from: 101, to: 200, color: "#cccccc" }
            ]
        },
        // 注释或删除该行
        // useFillColorAsStroke: true,
    }
}

2. 升级ApexCharts版本 #

此问题属于3.44版本的已知bug，后续发布的版本（如3.45及以上）已修复热力图颜色解析的相关逻辑。升级至稳定新版本后，即可正常使用十六进制颜色，同时保留useFillColorAsStroke配置。

3. 临时颜色格式替代 #

若无法升级版本且需要保留useFillColorAsStroke，可尝试用RGB格式颜色值替代十六进制，例如用"rgb(0,0,0)"代替"#000000"，可绕过报错并正常渲染颜色。

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