按扇区划分 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]
        }
    ]
};

Fiddle - http://jsfiddle.net/kqujgtgv/

顺便说一句，Chart.js 支持使用 ctx 在 canvas 上手动绘图。您只需要扩展图表 - 请参阅绘制线条并添加标签的示例。

对于雷达图，您可能需要查看在常规标签位置绘制圆圈的位置。

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

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

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

Partitioning radar graph in chart.js by sector

javascript

radar-chart

chart.js