두 줄 사이의 채우기 영역 - Chart.js v2

Chart.js을 사용하여 꺾은 선형 차트에서 두 줄 사이의 영역을 채우려고합니다. 예 : 두 줄 사이의 채우기 영역 - Chart.js v2

이미 대답이 here이며이를 위해 차트를 확장하는 방법을 설명합니다. 그러나이 기능은 현재 V2 (Native) (this thread on the github issues page)에 포함되어 있습니다. 문제는이 문서를 참조 할 수 없다는 것입니다.

문서에 대한 섹션이 있습니까? 누구든지이 기능을 사용하는 방법을 알고 있습니까?

감사합니다.

출처

2016-06-16 Miguel Péres

링크 된 스레드에서이 영역은 0 행으로 채워집니다. 따라서 선이 양수이면 영역이 0 행까지 채우고 음수이면 0 행까지 영역을 채 웁니다. 원하는 것을 얻기 위해 확장 메소드를 사용해야 할 수도 있습니다. –

제안을 연장하려고했지만 chartjs 버전 2에이 방법을 사용하는 것이 더 좋았습니까? –

v2에서 이것을 복제 할 수 있었습니까? 원주민 또는 연장하여? –

여기 두 개의 데이터 세트 라인 사이에 음영 처리를 할 수있는 작은 플러그인이 있습니다.

https://stackoverflow.com/a/41733045/852977

출처

2017-01-19 23:06:17 Wes

당신이 2.6.0 버전을 가져올 수 있는지 확인 : 여기에 설명 된대로

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

그런 다음 규칙을 따릅니다 : 아래

http://www.chartjs.org/docs/latest/charts/area.html는 예입니다, 그것이 어떻게 보이는지 :

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>My two lines with colour between them</title> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
    </head> 
    <body> 
     <canvas id="mychart" width="300" height="200"></canvas> 
     <script> 
      var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas) 

      var config = {    //configure the chart 
       type: 'line', 
       data: { 
        labels: [1, 2, 3, 4], 
        datasets: [{ 
         label: "Min", 
         backgroundColor: 'rgba(55, 173, 221, 0.6)', 
         borderColor: 'rgba(55, 173, 221, 1.0)', 
         fill: false, //no fill here 
         data: [5, 5, 3, 2] 
        }, 
        { 
         label: "Max", 
         backgroundColor: 'rgba(55, 173, 221, 0.6)', 
         borderColor: 'rgba(55, 173, 221, 1.0)', 
         fill: '-1', //fill until previous dataset 
         data: [8, 7, 6, 5] 
        }] 
       }, 
       options: { 
        maintainAspectRatio: false, 
        spanGaps: false, 
        elements: { 
         line: { 
          tension: 0.000001 
         } 
        }, 
        plugins: { 
         filler: { 
          propagate: false 
         } 
        }, 
        scales: { 
         xAxes: [{ 
          ticks: { 
           autoSkip: false 
          } 
         }] 
        } 
       } 
      }; 
      var chart = new Chart(ctx, config); 
     </script> 
    </body> 
</html>

출처

2017-07-30 10:32:07

버전 2.6.0이 문제를 해결하는 방법을 보여주는 약간의 내용을 게시 할 수 있는가? 현재 공식 문서에 대한 링크를 추가 했으므로 문서가 다른 곳으로 옮겨지면 쓸모가 없습니다. – Nisarg

Ofcourse, 실례합니다. 문서로 자체 설명 할 수있을 것이라고 생각했습니다. –

예제를 추가했습니다. 실제로 원래 질문을 읽은 후 @ NisargShah : 요청은 공식 문서에 대한 것이고 어디에서 찾을 수 있습니까? 공식 문서에 대한 링크는 대답이 될 것입니다. ;-) –

두 줄 사이의 채우기 영역 - Chart.js v2

답변

관련 문제