图表.js更改标签颜色

Chart.js change label color

本文关键字:标签 颜色 js 图表      更新时间:2023-09-26

我正在使用图表.js库制作极坐标图,但无法更改标签的颜色,请帮助我如何更改标签的颜色。我的图表看起来像 http://headsocial.com:8080/upload/145448587471822e0922d67c9dd6aae46d70bfeef1623.png,但我想将颜色更改为灰色,目前它显示为橙色

function show_polar_chart_data1(data, id){
        var jsonData = jQuery.parseJSON(data);
        var data = [
        {
            value: jsonData.IDENTITY_Avg,
            color: "#8258FA",
            highlight: "#8258FA",
            label: "IDENTITY("+jsonData.IDENTITY+")"
        },
        {
            value: jsonData.ROLE_Avg,
            color: "#34ED13",
            highlight: "#34ED13",
            label: "ROLE("+jsonData.ROLE+")"
        },
        {
            value: jsonData.ATTITUDE_Avg,
            color: "#FFFF00",
            highlight: "#FFFF00",
            label: "ATTITUDE("+jsonData.ATTITUDE+")"
        },
        {
            value: jsonData.AGILITY_Avg,
            color: "#FF0000",
            highlight: "#FF0000",
            label: "AGILITY("+jsonData.AGILITY+")"
        },
        {
            value: jsonData.FAIRNESS_Avg,
            color: "#00FFFF",
            highlight: "#00FFFF",
            label: "FAIRNESS("+jsonData.FAIRNESS+")"
        },
        {
            value: jsonData.CONFLICT_Avg,
            color: "#EE9A4D",
            highlight: "#EE9A4D",
            label: "CONFLICT("+jsonData.CONFLICT+")"
        }
    ];
    var ctx = document.getElementById("chart").getContext("2d");
    var polarChart = new Chart(ctx).PolarArea(data, {
        scaleOverride: true,
        scaleStartValue: 0,
        scaleStepWidth: 1,
        scaleShowLabels: false,
        scaleSteps: 10,
        onAnimationComplete: function () {
            this.segments.forEach(function (segment) {
                var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
                    x: this.chart.width / 2,
                    y: this.chart.height / 2,
                    startAngle: segment.startAngle,
                    endAngle: segment.endAngle,
                    outerRadius: segment.outerRadius * 2 + 10,
                    innerRadius: 0
                })
              var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
                while (normalizedAngle > 2 * Math.PI) {
                    normalizedAngle -= (2 * Math.PI)
                }
                if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
                    ctx.textAlign = "start";
                else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
                    outerEdge.y += 5;
                    ctx.textAlign = "center";
                }
                else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
                    outerEdge.y - 5;
                    ctx.textAlign = "center";
                }
                else
                    ctx.textAlign = "end";
                ctx.fillText(segment.label, outerEdge.x, outerEdge.y);
            })
            done();
        }
    });
        });
    }
}

只需添加

 ctx.fillStyle = 'black';

在您ctx.fillText...之前

您是否尝试过添加:

scaleFontColor: "<the color you want to add>"

到图表初始化,如下所示:

var polarChart = new Chart(ctx).PolarArea(data, {
   scaleFontColor: "<the color you want to add>"
   ...

检查此SO答案:使用图表更改折线图的标签字体颜色.js