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

我想把特定的颜色添加到＆＃34; titi＆＃34;，＆＃34; tata＆＃34;和＆＃34; tutu＆＃34;。

Answer 1

如果要更改所有点标签颜色，请使用选项pointLabelFontColor。

如果您想单独更改点标签颜色，则必须更改chart.js，因为它没有实现此功能。

以下是单独实现变更点标签颜色所需的chart.js修改：

更改chart.js行：

从：

ctx.fillStyle = this.pointLabelFontColor;

为：

ctx.fillStyle = this.labels[i].fillStyle;

和

从：

ctx.fillText(this.labels[i], pointLabelPosition.x, pointLabelPosition.y);

为：

ctx.fillText(this.labels[i].text, pointLabelPosition.x, pointLabelPosition.y);

和

从：

textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i] })).width + 5;

为：

textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i].text })).width + 5;

您的HTML应该是：

<html>
<head>
    <title>Radar Chart - Example</title>
    <script type="text/javascript" src="chartjs/Chart.js"></script>
</head>

<body>
    <canvas id="myChart" width="400" height="400"></canvas>

    <script>

        var data = {
            labels: [{
                text: "Eating", 
                fillStyle: "#01A4E0"
            }, {
                text: "Drinking", 
                fillStyle: "#FFE897"
            }, {
                text: "Sleeping", 
                fillStyle: "#428e2a"
            }, {
                text: "Designing", 
                fillStyle: "#6b3a0d"
            }, {
                text: "Coding", 
                fillStyle: "#0d5e6b"
            },{
                text: "Cycling", 
                fillStyle: "#450d6b"
            },{
                text: "Running", 
                fillStyle: "#6b0d36"
            }],         

            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            }, {
                label: "My Second dataset",
                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: [28, 48, 40, 19, 96, 27, 100]
            }]
        };      

        var ctx = document.getElementById('myChart').getContext('2d');
        var myRadarChart = new Chart(ctx).Radar(data);

    </script>
</body>
</html>

如果你对仍然使用标签作为数组的其他雷达图表使用相同的chart.js，你可以添加对设置标签（数组和对象）的两种方式的支持，用这些替换所提到的chart.js行：

ctx.fillStyle = this.labels[i].fillStyle ? this.labels[i].fillStyle : this.pointLabelFontColor;


ctx.fillText((this.labels[i].text ? this.labels[i].text : this.labels[i]), pointLabelPosition.x, pointLabelPosition.y);


textWidth = this.ctx.measureText(template(this.templateString, { value: (this.labels[i].text ? this.labels[i].text : this.labels[i]) })).width + 5;

Answer 2

Based on Chart.js 2.7 documentation我们可以使用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()),
                    },
                },
            }
        });

更改雷达图表js的标签颜色

2 个答案: