2016-05-18 1 views
16

Sto utilizzando chart.js per creare un grafico a barre e non riesco a modificare i colori dell'etichetta oi colori della legenda. Ho capito come modificare i colori dei tick, ma non sono sicuro di dove mettere il 'scaleFontColor', se è davvero quello che ho bisogno di usare.Colore etichetta Chart.js

Ecco un collegamento a ciò che sembra ora. http://imgur.com/nxaH1mk

E qui è il mio codice:

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    scaleFontColor: "white", 
    type: "bar", 
    data: { 
     labels: <?php echo json_encode($timeSlice); ?>, 
     datasets: [{ 
      label: "A Label", 
      backgroundColor: "rgba(159,170,174,0.8)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(232,105,90,0.8)", 
      hoverBorderColor: "orange", 
      scaleStepWidth: 1, 
      data: <?php echo json_encode($myCount); ?> 
     }] 
    }, 
    options: { 
     legend: { 
      fontColor: "white" 
     }, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        fontColor: "white", 
        stepSize: 1, 
        beginAtZero: true 
       } 
      }] 
     } 
    } 
}); 

Qualsiasi aiuto sarebbe molto apprezzato.

+0

https://stackoverflow.com/a/48580585/7186739 – Super

risposta

38

Guh Ho risolto, mi dispiace per la domanda. Ma credo che lascerò una risposta nel caso in cui qualcun altro incontri il mio problema.

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: "bar", 
    data: { 
     labels: <?php echo json_encode($timeSlice); ?>, 
     datasets: [{ 
      label: "My Label", 
      backgroundColor: "rgba(159,170,174,0.8)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(232,105,90,0.8)", 
      hoverBorderColor: "orange", 
      scaleStepWidth: 1, 
      data: <?php echo json_encode($myCount); ?> 
     }] 
    }, 
    options: { 
     legend: { 
      labels: { 
       fontColor: "white", 
       fontSize: 18 
      } 
     }, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        fontColor: "white", 
        fontSize: 18, 
        stepSize: 1, 
        beginAtZero: true 
       } 
      }], 
      xAxes: [{ 
       ticks: { 
        fontColor: "white", 
        fontSize: 14, 
        stepSize: 1, 
        beginAtZero: true 
       } 
      }] 
     } 
    } 
}); 
+0

Grazie! Mi ha aiutato molto – molbal

+0

mi ha aiutato anche. Grazie! –

+0

Grazie, hanno davvero bisogno di migliorare i loro documenti .. – phil