Chart.js - aggiungi sfumatura invece di tinta unita - implementazione della soluzione

Question

Sto usando Chart.js e tutto è ok, ma voglio sostituire lo sfondo del colore corrente (fillColor: "rgba (250,174,50,0.5)") con un gradiente. Ho una soluzione per sostituire il gradiente, ma è troppo difficile per me implementarlo con la mia scarsa conoscenza di JS. Immagino piuttosto facile per qualcuno che conosce JS.

Quindi il mio codice Chart.js:

 <script> 

     var data = { 
      labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"], 
      datasets: [ 
       { 
        fillColor : "rgba(250,174,50,0.5)", 
        strokeColor : "#ff6c23", 
        pointColor : "#fff", 
        pointStrokeColor : "#ff6c23", 
        pointHighlightFill: "#fff", 
        pointHighlightStroke: "#ff6c23", 
        data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4] 
       } 
      ] 
     }; 

     var options = { 
      responsive: true, 
      datasetStrokeWidth : 3, 
      pointDotStrokeWidth : 4, 
      tooltipFillColor: "rgba(0,0,0,0.8)", 
      tooltipFontStyle: "bold", 
      tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>", 
      scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>" 
     }; 

     var ctx = document.getElementById("temp-chart").getContext("2d"); 
     var myLineChart = new Chart(ctx).Line(data, options); 

    </script> 

E here is solution with gradient. Qualcuno può provare a implementare questo gradiente di sfondo invece del mio attuale solido background? Grazie per l'aiuto.

Ho provato a implementarlo, ma poi altre funzioni non funzionano (come scaleLabels ecc.).

Answer 1

Il collegamento che hai fornito era abbastanza chiaro, devi mettere nel campo fillColor in set di dati un oggetto linearGradient invece di un colore semplice. Si può fare gradienti complessi, ma qui è il codice di un semplice (cambiando l'opacità dello stesso arancione):

var gradient = ctx.createLinearGradient(0, 0, 0, 400); 
gradient.addColorStop(0, 'rgba(250,174,50,1)'); 
gradient.addColorStop(1, 'rgba(250,174,50,0)'); 

E i dataset completi:

datasets: [ 
      { 
       fillColor : gradient, // Put the gradient here as a fill color 
       strokeColor : "#ff6c23", 
       pointColor : "#fff", 
       pointStrokeColor : "#ff6c23", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "#ff6c23", 
       data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4] 
      } 
     ] 

vederlo in azione in questo

Answer 2

Nota: per coloro che utilizzano la versione più recente (v2.7.0) di Chart.js, scopri che non funziona mentre si copia e incolla la risposta di @ bviale al codice base; Alcuni nomi di proprietà sono stati modificati:

fillColor -> backgroundColor 
strokeColor -> borderColor 
pointColor -> pointBackgroundColor 
pointStrokeColor -> pointBorderColor 

È necessario aggiornare tali nomi di proprietà per farlo funzionare.

Riferimento: https://github.com/chartjs/Chart.js/blob/master/docs/charts/line.md#dataset-properties