ChartJS 2 Zeilen mit jeweils unterschiedlichen Füllgradienten

Question

Ich habe ChartJS Version 2.6 in einer Ionic 3/Angular 4 App. In meiner Liniendiagrammkonfiguration habe ich 2 Datensätze. Ich bin stecken geblieben und habe versucht, beide Linien mit ihren eigenen Füllgradienten zu versehen.

Ich brauche etwas wie folgt aus:

Aber bisher habe ich es geschafft nur so etwas wie dieses:

Egal, was ich versuche, meine erste Daten-Set-Chart immer Übermacht die zweite. Wie es die zweite versteckt.

Hier ist das Diagramm Config ich versuche:

let chart = this.lineCanvas.nativeElement.getContext('2d'), 
    gradientSys = chart.createLinearGradient(0, 200, 0, 0); 

    gradientSys.addColorStop(0.4, 'rgba(49, 218, 11, 1)'); 
    gradientSys.addColorStop(0.7, 'rgba(218, 129, 11, 1)'); 
    gradientSys.addColorStop(1.0, 'rgba(218, 11, 11, 1)'); 

    let gradientDia = chart.createLinearGradient(0, 120, 0, 0); 

    gradientDia.addColorStop(0.4, 'rgba(49, 218, 11, 1)'); 
    gradientDia.addColorStop(0.6, 'rgba(218, 129, 11, 1)'); 
    gradientDia.addColorStop(1.0, 'rgba(218, 11, 11, 1)'); 

    this.chartConfig = { 
     type: 'line', 

     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         min: 0, 
         callback: function (value, index, values) { 
          if (Math.floor(value) === value) { 
           return value; 
          } 
         } 
        } 
       }] 
      } 
     }, 

     data: { 
      labels: [], 
      datasets: [ 
       { 
        label: 'Systolic', 
        fill: true, 
        lineTension: 0.1, 
        backgroundColor: gradientSys, 
        borderColor: "rgba(115, 115, 115, 1)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 1.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(115, 115, 115, 1)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 1, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(115, 115, 115, 1)", 
        pointHoverBorderColor: "rgba(115, 115, 115, 1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 3, 
        pointHitRadius: 10, 
        spanGaps: false, 
        data: [] 
       }, 
       { 
        label: 'Diastolic', 
        fill: true, 
        lineTension: 0.1, 
        backgroundColor: gradientDia, 
        borderColor: 'rgba(115, 115, 115, 1)', 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 1.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: 'rgba(115, 115, 115, 1)', 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 1, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: 'rgba(115, 115, 115, 1)', 
        pointHoverBorderColor: 'rgba(115, 115, 115, 1)', 
        pointHoverBorderWidth: 2, 
        pointRadius: 3, 
        pointHitRadius: 10, 
        spanGaps: false, 
        data: [] 
       } 
      ] 
     } 
    }; 

Die Daten [] Werte sind leer da, wie ich sie aus der Datenbank später eingestellt, nachdem ich bekam. Ich habe versucht, den Füllwert für den 1. Datensatz als '-1' zu setzen, aber das bricht. Bitte zeigen Sie mir hier in die richtige Richtung?

Answer 1

Wir haben zwei mögliche Lösungen in den Kommentaren diskutiert.

Die Option, die funktionierte, war einfach die Renderreihenfolge umzukehren: einfach datasets[0] mit datasets[1] (und umgekehrt) zu tauschen, hat den Trick gemacht. Ich würde erwarten, dass die JavaScript-Bibliothek hier einen Graphen über dem anderen darstellt, wenn also ein Graph immer größer ist, muss er zuerst geplottet werden.

Wenn dies nicht funktioniert hätte, wäre eine andere Option, die in Betracht gezogen werden könnte, zwei separate Diagrammobjekte zu erstellen und diese auf zwei DOM-Elemente abzubilden, die sich genau überlagern. Wenn die Graph-Objekte in jedem Fall transparent sind (d. H. Der Hintergrund hat keine Füllfarbe), könnte dies funktionieren.