ChartJS 각 채우기 그라데이션이 다른 두 줄

Question

Ionic 3/Angular 4 앱에 ChartJS 버전 2.6이 있습니다. 내 라인 차트 구성에는 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

우리는 코멘트에서 가능한 두 가지 해결책을 논의했습니다.

렌더링 순서를 바꾸는 것만으로도 효과가있었습니다. 간단히 말해 datasets[0]을 datasets[1] (또는 그 반대로)으로 바꾸는 것이 트릭을 만들었습니다. JavaScript 라이브러리가 여기에 하나의 그래프를 표시 할 것으로 기대합니다. 따라서 그래프 하나가 항상 커지면 먼저 그래프를 그려야합니다.

이 방법이 효과가 없다면 두 가지 별도의 그래프 개체를 만들고이를 서로 겹치는 두 개의 DOM 요소에 매핑 할 수 있습니다. 각 경우에 그래프 개체가 투명하면 (예 : 배경에 채우기 색이 없음)이 경우 효과가있을 수 있습니다.