2016-06-02 16 views
2

Ich habe ein einfaches Diagramm mit http://www.chartjs.org wie:Chart.js Änderung Label Schriftfarbe

<script> 
     var canvas = document.getElementById('myChart2'); 
     var data = { 
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
      datasets: [{ 
       label: "My First dataset", 
       backgroundColor: "rgba(179,181,198,0.2)", 
       borderColor: "rgba(179,181,198,1)", 
       pointBackgroundColor: "rgba(179,181,198,1)", 
       pointBorderColor: "#fff", 
       pointHoverBackgroundColor: "#fff", 
       pointHoverBorderColor: "rgba(179,181,198,1)", 
       data: [65, 59, 90, 81, 56, 55, 40] 
      }, { 
       label: "My Second dataset", 
       backgroundColor: "rgba(255,99,132,0.2)", 
       borderColor: "rgba(255,99,132,1)", 
       pointBackgroundColor: "rgba(255,99,132,1)", 
       pointBorderColor: "#fff", 
       pointHoverBackgroundColor: "#fff", 
       pointHoverBorderColor: "rgba(255,99,132,1)", 
       data: [28, 48, 40, 19, 96, 27, 100] 
      }] 
     }; 
     var option = { 
      showLines: false 
     }; 
     var myLineChart = Chart.Radar(canvas, { 
      data: data, 
      options: option 
     }); 
    </script> 

Ich suche in der Dokumentation, aber ich finde nicht, wie alle Etiketten, Farbe zu ändern?

In meinem exemple muss ich Farbe labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"] oder label: "My First dataset",

Irgendwelche Ideen ändern?

+0

Vielleicht Besuche 'defaultFontColor' http: //www.chartjs.org/docs/#chart-configuration-global-configuration –

Antwort

6
/*Global settings*/ 
    Chart.defaults.global.defaultFontColor = '#fff'; 
+2

Das geht wo genau? –

+0

Dies wird auf dem globalen Diagramm festgelegt. Leg es einfach irgendwo hin. –

+0

Bitte erwähnen Sie, wo genau das möglich ist? vor allem in Typoskript in Angular 2/4. Ich habe versucht, aber nichts hat funktioniert - es gab tatsächlich Kompilierungsfehler. –

0

Wenn jemand mit NG2-Charts mit Typoskript:

in der Komponente:

private lineChartOptions:any = { 
    legend : { 
     labels : { 
      fontColor : '#ffffff' 
     } 
    } 
}; 

In der Vorlage:

<canvas baseChart [options]="lineChartOptions"></canvas> 
+1

Diese Einstellung hilft nur bei der Änderung der Beschriftung der Legende Farbe nicht alle Beschriftungen in den Diagrammen - standardmäßig ist dies die Farbe: # 666 –