ChartJS 海图雷达辉边效应

4zcjmb1e 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(172)

我使用chart.js创建了一个简单的雷达图，并尝试获得类似于以下内容的美学效果：

（发光边缘的边界）
为了模拟这种效果，我尝试使用createRadialgradient并填充数据-但我的生命无法找到图形的中心点，以创建辉光一样的效果-经过思考，它不一定会把发光的边界线，而是图形的中心...
有人有什么想法吗？

chart.js

来源：https://stackoverflow.com/questions/66200100/chartjs-radar-glowing-edges-effect

2条答案

按热度按时间

f0ofjuux1#

我能够实现一些接近使用以下：

let draw = Chart.controllers.radar.prototype.draw;
                            Chart.controllers.radar.prototype.draw = function() {
                              let chart = this.chart;
                              let ctx = chart.ctx;
                              let _stroke = ctx.stroke;
                              ctx.stroke = function() {
                                ctx.save();
                                ctx.shadowColor = 'rgba(3, 252, 240, 1)' //ctx.strokeStyle;
                                ctx.shadowBlur = 40;
                                ctx.shadowOffsetX = 0;
                                ctx.shadowOffsetY = 0;
                                _stroke.apply(this, arguments);
                                ctx.restore();
                              };
                              draw.apply(this, arguments);
                              ctx.stroke = _stroke;
                            }

赞(0）回复(0）举报 2022-11-07

aydmsdu92#

用于带有折线图图表。我使用此扩展名。https://www.npmjs.com/package/chartjs-plugin-style
只要按照步骤去做，你就会得到它。

赞(0）回复(0）举报 2022-11-07