javascript - 在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);