Javascript 按扇区划分chart.js中的雷达图

我在Chart.js中有一个雷达五角大楼，我用它在用户进行测验后为他们提供五个不同类别的分数。如果他们在A类中表现出色，我希望该类别有一个绿色填充，而如果他们在C类中表现不佳，我希望它有一个红色填充

---

Chart.js是否允许您将雷达划分为n个不同的扇区，然后这些扇区可以有自己的颜色填充？我阅读了chart.js文档，但它们似乎不支持使用ctx手动绘制线条。有什么想法吗？

您可以为每个部门制定一个单独的系列

预览

---

脚本

var data = {
    labels: ["", "", "", "", "", "", ""],
    datasets: [
        {
            fillColor: "rgba(187,151,205,0.2)",
            strokeColor: "rgba(187,151,205,1)",
            pointColor: "rgba(187,151,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(187,151,205,1)",
            data: [65, 65, 0, 0, 0]
        },
        {
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [0, 48, 48, 0, 0]
        },
        {
            fillColor: "rgba(151,0,87,0.2)",
            strokeColor: "rgba(151,0,87,1)",
            pointColor: "rgba(151,0,87,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [0, 0, 58, 58, 0]
        },
        {
            fillColor: "rgba(0,205,187,0.2)",
            strokeColor: "rgba(0,205,187,1)",
            pointColor: "rgba(0,205,187,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(0,187,205,1)",
            data: [0, 0, 0, 38, 38]
        },
        {
            fillColor: "rgba(151,205,187,0.2)",
            strokeColor: "rgba(151,205,187,1)",
            pointColor: "rgba(151,205,187,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 0, 0, 0, 28]
        }
    ]
};

小提琴-

---

顺便说一下，Chart.js确实支持使用ctx在画布上手动绘制。您只需要扩展图表-请参阅，以获取绘制直线并添加标签的示例

对于雷达图，您可能希望查看在常规标签位置绘制圆的位置

如果需要在标签之间绘制一些东西，只需将计算点位置的线更改为（注意

+0.5

）

var pointLabelPosition = this.scale.getPointPosition(i + 0.5,
         this.scale.calculateCenterOffset(this.scale.max) + 5);