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

Question

我在Chart.js中有一个雷达五边形，我用它来为用户提供测验后的五个不同类别的分数。如果它们在A类中表现良好，我希望该类别具有绿色填充，而如果它们在类别C中表现不佳，我希望它具有红色填充。

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

Answer 1

您可以为每个部门设置单独的系列

预览

<强>脚本

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]
        }
    ]
};

小提琴 - http://jsfiddle.net/kqujgtgv/

顺便说一句，Chart.js支持使用ctx手动绘制画布。您只需要扩展图表 - 请参阅https://stackoverflow.com/a/30323431/360067以获取绘制线条并添加标签的示例。

对于雷达图表，您可能需要查看https://stackoverflow.com/a/31404882/360067，其中圆圈在常规标签位置绘制。

如果您需要在标签之间绘制内容，只需将计算点位置的行更改为（注意+ 0.5）

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