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' },
    ...
}

我使用了钩子函数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对象。

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

Answer 2

我假设您正在使用chart.js库中的此模块

https://www.chartjs.org/docs/latest/charts/radar.html

文档说，您可以更改在数据集属性上指定颜色的颜色。

data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2],
        backgroundColor: 'red'
    }]
}

希望有帮助。