ChartJSの塗りつぶし勾配が異なる2行それぞれ

Question

ChartJSバージョン2.6はIonic 3/Angular 4アプリにあります。私の折れ線グラフの設定では、私は2つのデータセットを持っています。私は2つのラインにそれぞれ独自の塗りつぶしグラデーションを持たせようとしている。

しかし、これまでのところ、私はこれだけのようなものを管理しています：

私はこのようなものが必要

どんなに私は、私の第一のデータセットチャート常に試みる何

第2のものに勝る。それは2番目のものを隠すように。私は後で私は、データベースからそれらを得た後にそれらを設定するよう

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: [] 
       } 
      ] 
     } 
    }; 

データは[]の値が空である：ここでは

は私がしようとしているチャートの設定です。最初のデータセットの塗りつぶし値を '-1'に設定しようとしましたが、それは壊れます。ここに正しい方向で私を指摘してください？

Answer 1

コメントには2つの解決策があります。

レンダリング順序を逆順にするだけでした。単にdatasets[0]をdatasets[1]（またはその逆）と入れ替えただけで、そのトリックが行われました。私は、ここでJavaScriptライブラリが1つのグラフを他のグラフよりもプロットしていることを期待しています。したがって、グラフが常に大きい場合は最初にプロットする必要があります。

これがうまくいかなかった場合、2つの別個のグラフオブジェクトを作成し、それらを互いに正確にオーバーレイする2つのDOM要素にマップすることも考えられます。各場合においてグラフオブジェクトが透明である（すなわち、背景が塗りつぶしていない）場合、これは機能している可能性がある。