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更改標籤顏色

回答

相關問題