Chart.js更改标签颜色

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

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

     }); 
    } 
}

来源

2016-02-03 Manu Jain

Just添加

ctx.fillStyle = 'black';

您ctx.fillText...

来源

2016-02-03 10:23:15 potatopeelings

谢谢@potatopeelings。这正是我想要的。没有声望+1 –

完全没问题。很高兴它解决了。干杯! – potatopeelings

您是否尝试过加入：

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

到图表的初始化是这样的：

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

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

来源

2016-02-03 08:06:28 allu

我试过同前，但是当我设置它不是working..Actually“scaleShowLabels：真”，那么它显示灰色标签，但是当我设置“propertyscaleShowLabels：假“然后颜色自动变为橙色。我需要做这个属性为false，因为我不想要雷达比例。 –

Chart.js更改标签颜色

回答

相关问题