レーダーチャートのラベルの色を変更する

レーダーチャートのラベルの色をchart.jsで変更する方法を研究しました。私はscaleFontColorを試しましたが、それは私のためには機能しません。レーダーチャートのラベルの色を変更する

var data = { 
    labels: ["titi", "tata", "tutu"], 

    datasets: [{ 
    fillColor: "rgba(51,49,90,0.5)", 
    strokeColor: "rgba(255,255,255,1)", 
    pointColor: "rgba(220,220,220,1)", 
    pointStrokeColor: "#fff", 
    data: [12, 18, 22] 

    }] 
}; 

var options = { 
    responsive: true 
}; 

var chart = document.getElementById('chart-area-x').getContext('2d'); 
new Chart(chart).Radar(data, options);

私は "ティティ"、 "TATA" と "チュチュ" に特定の色を載せていきたいと思います。

出典

2017-01-31 Julien L

スタイルシートを使用することができます。しかしマークアップがなければ、私は確信が持てません。 – Joe

すべての点のラベルの色を変更する場合は、オプションpointLabelFontColorを使用します。

ポイントラベルの色を個別に変更する場合は、この機能を実装していないため、chart.jsを変更する必要があります。

変更chart.jsライン：

ctx.fillStyle = this.pointLabelFontColor;

へ：

ctx.fillStyle = this.labels[i].fillStyle;

から

ここ

は個別に変化点のラベルの色を達成するために必要なchart.js修正されています

および

ctx.fillText(this.labels[i], pointLabelPosition.x, pointLabelPosition.y);

に：から

textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i] })).width + 5;

に：

textWidth = this.ctx.measureText(template(this.templateString, { value: this.labels[i].text })).width + 5;

から

ctx.fillText(this.labels[i].text, pointLabelPosition.x, pointLabelPosition.y);

と

あなたのHTMLは次のようになります。あなたは、ラベルを設定する両方の方法のサポートを追加することができます配列としてまだラベルを使用することになり、他のレーダーチャート（配列とオブジェクト）に同じchart.jsを使用している場合は交換

<html> 
<head> 
    <title>Radar Chart - Example</title> 
    <script type="text/javascript" src="chartjs/Chart.js"></script> 
</head> 

<body> 
    <canvas id="myChart" width="400" height="400"></canvas> 

    <script> 

     var data = { 
      labels: [{ 
       text: "Eating", 
       fillStyle: "#01A4E0" 
      }, { 
       text: "Drinking", 
       fillStyle: "#FFE897" 
      }, { 
       text: "Sleeping", 
       fillStyle: "#428e2a" 
      }, { 
       text: "Designing", 
       fillStyle: "#6b3a0d" 
      }, { 
       text: "Coding", 
       fillStyle: "#0d5e6b" 
      },{ 
       text: "Cycling", 
       fillStyle: "#450d6b" 
      },{ 
       text: "Running", 
       fillStyle: "#6b0d36" 
      }],   

      datasets: [{ 
       label: "My First dataset", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: [65, 59, 90, 81, 56, 55, 40] 
      }, { 
       label: "My Second dataset", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [28, 48, 40, 19, 96, 27, 100] 
      }] 
     };  

     var ctx = document.getElementById('myChart').getContext('2d'); 
     var myRadarChart = new Chart(ctx).Radar(data); 

    </script> 
</body> 
</html>

これらの代わりに上記のchart.js行を使用してください：

ctx.fillStyle = this.labels[i].fillStyle ? this.labels[i].fillStyle : this.pointLabelFontColor; 


ctx.fillText((this.labels[i].text ? this.labels[i].text : this.labels[i]), pointLabelPosition.x, pointLabelPosition.y); 


textWidth = this.ctx.measureText(template(this.templateString, { value: (this.labels[i].text ? this.labels[i].text : this.labels[i]) })).width + 5;

出典

2017-02-03 14:12:43

こんにちは、お世話になりました。しかし、私はまだ問題があります.. 私が行くところで私のラベルが消えてしまいます。私がポイントしているときに私のラベルの名前が表示されません、 "[オブジェクトオブジェクト]：25" .. 何か考えている？ –

こんにちはフェルナンド、あなたのソリューションは、chart.js 1.0では非常にうまく動作しますが、2.5ではなく...私は何を変更する必要があるのか考えていますか？ –

this.labels [i]の代わりにthis.pointLabels [i]になりました。 – tdon

レーダーチャートのラベルの色を変更する

答えて

関連する問題