Question

我使用chart.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();
        }
    });

        });
    }
}

Answer 1

添加

 ctx.fillStyle = 'black';

在ctx.fillText...

之前

Answer 2

您是否尝试过添加：

if File1_col3_value >= File2_col4_value && File1_col3_value <= File2_col5_value

到图表初始化如下：

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

检查此答案：Change label font color for a line chart using Chart.js

Chart.js更改标签颜色

2 个答案: