Chart.js - füge Gradienten statt Normallack - Umsetzung Lösung

Question

Ich verwende Chart.js und alles ist in Ordnung, aber ich mag aktuellen Farbhintergrund ersetzen (fillColor: „rgba (250,174,50,0.5)“) mit ein Farbverlauf. Ich habe Lösung für Gradienten zu ersetzen, aber es ist zu dificult für mich mit meinem armen JS Wissen umzusetzen. Ich denke ziemlich einfach für jemanden, der JS kennt.

Also mein Chart.js Code:

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

Und here is solution with gradient. Kann jemand versuchen, statt meiner aktuellen soliden Hintergrund dieses Gradienten Hintergrund implementieren? Danke für die Hilfe.

ich es tryed implementieren, dann aber andere Funktionen funktionieren nicht (wie scaleLabels etc.).

Answer 1

Der Link, den Sie zur Verfügung gestellt haben, war ziemlich klar, Sie müssen das Feld fillColor in Datasets ein linearGradient-Objekt anstelle einer einfarbigen setzen. Sie können komplexe Verläufe tun, aber hier ist der Code eines einfachen (die Opazität der gleichen Orange zu ändern):

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

Und Ihre komplette Datensätze:

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] 
      } 
     ] 

Sehen sie in Aktion in dieser JSFiddle

Answer 2

Hinweis: Für diejenigen, die neuere Version (v2.7.0) von Chart.js verwendet, herauszufinden, dass nicht beantworten, während Sie copy-paste @ bviale zurück auf die Code-Basis arbeitet; Einige Eigenschaftsnamen haben sich geändert:

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

Sie müssen diese Eigenschaftsnamen aktualisieren, damit es funktioniert.

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