Chartjs雷达图 - 更改端点标签的颜色

Question

我需要更改图表上每个点显示的标签颜色，我尝试了许多不同的方法，但都没有任何结果。 图片

代码

                    const CHART = document.getElementById("radar_chart");
                    Chart.defaults.scale.ticks.beginAtZero = true;
                    Chart.defaults.scale.ticks.max = 10;
                    Chart.defaults.scale.ticks.display = false;
                    Chart.defaults.scale.ticks.display = false;

                    var radar = new Chart(CHART, {
                        type: 'radar',
                        data: {
                            labels: ["Team", "Potential", "Risk", "Social", "Hype"],
                            datasets: [
                                {
                                    backgroundColor: "#2e4259cc",
                                    borderColor: "#fff",
                                    borderWidth: 3,
                                    pointBorderColor: "#fff",
                                    pointBackgroundColor: "#2e4259",
                                    pointHoverRadius: 5,
                                    data: [3, 5, 9, 5, 8]
                                }
                            ]
                        },
                        options: {
                            legend: {
                                display: false,
                                fontColor: "#fff",
                                labels: {
                                    fontColor: '#fff'
                                }
                            }
                        }
                    });

我最近尝试更改pointLabelFontColor，但没有成功，似乎找不到任何相关的信息。

- ii iml0sto1

Answer 1

options:{
  scale:{
    pointLabels:{
       fontColor:"red",
    },
}

理论上，如果我们按照线性径向轴的文档进行操作，这应该是您应该使用的配置。

该文档适用于2.7.2版本，因此我不确定它是否适用于您的版本，或者在旧版本中是否有所不同。

- vrajau

---

我使用2.7.0版本，但在这个版本上无法运行。我会尝试获取最新版本并与您联系。 - ii iml0sto1

@iiiml0sto1 如果您尝试将我的配置放入规模中会发生什么？老实说，我也一直在苦苦挣扎他们的文档。 - vrajau

就是这样！我不知道为什么不能直接像这样设置 Chart.defaults.scale.pointLabels.fontColor = "red"，但是反过来却可以，非常感谢！ :) - ii iml0sto1

我不确定，说实话！没问题！ - vrajau

Answer 2

options: {
        scales: {
            r: {
          
                pointLabels:{
                    color: 'rgb(54, 162, 235)',
                },

            },
}

我不知道你正在使用哪个版本，但当前的配置对我是有效的。

- impactCn

---

不错！对我来说运行正常。我正在使用3.7.0版本。 - B.M. Rafiul Alam