更改雷达图 js 的标签颜色

Question

我研究了如何使用 chart.js 更改雷达图的标签颜色。我试过了，scaleFontColor但这对我不起作用。

var data = {
  labels: ["titi", "tata", "tutu"],

  datasets: [{
    fillColor: "rgba(51,49,90,0.5)",
    strokeColor: "rgba(255,255,255,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    data: [12, 18, 22]

  }]
};

var options = {
  responsive: true
};

var chart = document.getElementById('chart-area-x').getContext('2d');
new Chart(chart).Radar(data, options);

我想为“titi”、“tata”和“tutu”添加特定颜色。

Answer 1

基于 Chart.js 2.7 文档，我们可以为标签着色options.scale.pointLabels.fontColor：

        let tagsLabel = [ 'Axe1', 'Axe2', 'Axe3'];
        let chart = new Chart(targetNode, {
            type: 'radar',
            data: {
                labels: tagsLabel,
                datasets: [
                    {
                        data: [
                            0, 2,
                        ],
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'left'
                },
                title: {
                    display: true,
                    text: "It work's"
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                scale: {
                    // ticks: {
                    //     backdropColor: 'red',
                    //     // Include a dollar sign in the ticks
                    //     callback: function(value, index, values) {
                    //         return '$' + value;
                    //     }
                    // }
                    pointLabels: {
                        // callback: function(value, index, values) {
                        //     return '$' + value;
                        // }
                        fontColor: tagsLabel.map((lbl)=>randColor()),
                    },
                },
            }
        });