javascript - Chart.js 雷达背景色

Question

有人知道是否有可能改变雷达的背景区域，就像海报上的图像一样？

Answer 1

我遇到了同样的问题，看起来文档对于这些情况并不友好，我的解决方案基于这些示例:

• https://github.com/chartjs/Chart.js/issues/3956#issuecomment-287080840
• https://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

我的 options 对象如下所示:

options: {
    ...
    chartArea: { backgroundColor: 'red' },
    ...
}

我使用了钩子(Hook)函数beforeDraw来绘制图表后面的背景颜色，它看起来像这样:

Chart.pluginService.register({
    beforeDraw: chart => {
        const { ctx, scale, config } = chart
        const { xCenter, yCenter, drawingArea: radius } = scale

        ctx.save()
        ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2)
        ctx.fillStyle = config.options.chartArea.backgroundColor
        ctx.fill()
        ctx.restore()
    }
});

在 beforeDraw 函数中，您可以使用自定义属性捕获 options 对象。

您可以查看完整的钩子(Hook)列表 here