Question

我想将雷达图表中扇区的颜色设置为：

这在Chart.js中是否可行？是否有其他图表包可以做到这一点？

如果它可以与AngularJS一起使用，那就更好了。

Answer 1

您可以通过改变缩放线的大小来欺骗它。

尝试根据您的要求设置 scaleLineWidth ，

var radarOptions = {
    scaleLineWidth :16 ,
}

Check this fiddle here

增加 scaleLineWidth ，直到填补2行之间的差距。

你也可以设置 scaleLineColor ，这样它就像一个背景，

var radarOptions = {
    scaleLineWidth :16 ,
    scaleLineColor : "#EEEEEE"
}

Check this fiddle here

Answer 2

Saurabh的答案以及here的答案不会奏效，因为填写整个背景将掩盖标签并为每个部门提供不同的区域。

所以相反（在我的情况下使用angular-chart）我在数据集前面添加数据以匹配每个扇区，并传递颜色对象我能够让它看起来正确同样。

所以以这样的角度构建数据：

<br/>

给我这个：

Answer 3

您可以使用 Chart.JS 及其数据集属性实现具有您喜欢的任何扇区的任何雷达图。

        "datasets": [
            {
                "backgroundColor": "rgba(94, 221, 46, 0)",
                "borderColor": "rgb(126, 255, 16)",
                "pointBackgroundColor": "#7eff10",
                "borderWidth": 2,
                "pointRadius": 4,
                "data": [
                    30,
                    62,
                    80,
                    30
                ]
            },
            {
                "backgroundColor": "rgb(255, 255, 255)",
                "pointRadius": 0,
                "borderWidth": 0,
                "data": [
                    9,
                    9,
                    9,
                    9
                ]
            },
            {
                "backgroundColor": "rgb(217, 217, 214)",
                "pointRadius": 0,
                "borderWidth": 0,
                "data": [
                    25,
                    25,
                    25,
                    25
                ]
            },
            {
                "backgroundColor": "rgb(113, 178, 201)",
                "pointRadius": 0,
                "borderWidth": 0,
                "data": [
                    50,
                    50,
                    50,
                    50
                ]
            },
            {
                "backgroundColor": "rgb(0, 119, 139)",
                "pointRadius": 0,
                "borderWidth": 0,
                "data": [
                    75,
                    75,
                    75,
                    75
                ]
            },
            {
                "backgroundColor": "rgb(0, 42, 58)",
                "pointRadius": 0,
                "borderWidth": 0,
                "data": [
                    100,
                    100,
                    100,
                    100
                ]
            },
            {
                "backgroundColor": "rgb(85, 89, 91)",
                "pointRadius": 0,
                "borderWidth": 2,
                "data": [
                    100,
                    0,
                    0,
                    0
                ]
            },
            {
                "backgroundColor": "rgb(85, 89, 91)",
                "pointRadius": 0,
                "borderWidth": 2,
                "data": [
                    0,
                    100,
                    0,
                    0
                ]
            },
            {
                "backgroundColor": "rgb(85, 89, 91)",
                "pointRadius": 0,
                "borderWidth": 2,
                "data": [
                    0,
                    0,
                    100,
                    0
                ]
            },
            {
                "backgroundColor": "rgb(85, 89, 91)",
                "pointRadius": 0,
                "borderWidth": 2,
                "data": [
                    0,
                    0,
                    0,
                    100
                ]
            }
        ]

结帐完整版以及图表在我的小提琴中的样子：https://jsfiddle.net/rb38n490/5/

是否可以在Chart.js的雷达图表中设置扇区的背景颜色？

3 个答案: