wkhtmltopdf生成pdf时中断和canvas画柱状图的颜色值变为黑色

在网页端生成图表时遇到颜色和样式不符的问题,通过排查发现ctx.setLineDash([])导致生成失败,将此设置移除后可正常生成。同时,柱状图颜色由蓝色变为黑色,原来是ctx.fillStyle使用数组造成的,改为直接设置颜色字符串(#3149FF)解决了颜色问题。尽管如此,生成的图表仍与网页端存在微小差异,主要是虚线和背景色的淡度。目前大体问题已解决,剩下一些细节调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在网页端一切正常的情况下进行生成时,试了好多次都如下面所示

最终经过一步步排查发现是在画图时设置了ctx.setLineDash([]);导致把此设置删除后即可成功生成,但ctx.setLineDash([]);是把虚线设置为实线的过程,所以处理这里可以把画实现放在画虚线前即可,还有一个更快捷的方式就是设置为ctx.setLineDash([0,0]);亲测有效

生成后,发现柱状图本来网页看着蓝色的,结果变成了黑色

又经过排查发现是ctx.fillStyle =['#3149FF'];这里的设置不能用数组,直接设置为ctx.fillStyle = '#3149FF';后进行生成即可得到正确的颜色。

但最终发现和网页端还是存在一些差异,因为虚线和背景色基本是一致的,在真正的图标中看到右侧的虚线的是非常淡的,网页端的图如下,大体的已经成功,接下来的就是一些小微调了,算完美成功了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值