Chart.js изменить цвет метки

Я использую library.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

Просто добавить

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>" 
    ...

Проверить этот SO ответ: 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 изменить цвет метки

ответ

Смежные вопросы