Chart.js의 수직 형 줄 문제

Question

Chart.js 라이브러리를 사용하여 선 그래프를 만들었습니다. 필요한 레이블 수가 많아서 Limit labels number on Chartjs line chart 질문에있는 방법을 사용하지 않고 건너 뛰었습니다 (아래 참조). 가 두 번째 레이블이 일반 될 경우 나타나는 임의의 검은 색 선이있다 :

내 차트는 내가 한 가지 예외로 할 방법을 정확히 보인다. 내가 사용하는 경우

• :

  Chart.defaults.global.elements.point.radius = 2; 
   
  
   
  var ctx = document.getElementById("graph-1-met"); 
   
  
   
  var myLineChart = new Chart(ctx, { 
   
      type: 'line', 
   
      data: { 
   
       labels: [0,'','','','','',1,'','','','','',2,'','','','','',3,'','','','','',4,'','','','','',5,'','','','','',6,'','','','','',7,'','','','','',8,'','','','','',9,'','','','','',10,'','','','','',11,'','','','','',12,'','','','','',13,'','','','','',14,'','','','','',15,'','','','',''], 
   
       datasets: [ 
   
        { 
   
         data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55], 
   
         backgroundColor: "rgba(0,204,255,0.2)", 
   
         borderColor: "rgba(0,204,255,1)", 
   
         borderWidth: 2 
   
        } 
   
       ] 
   
      }, 
   
      options: { 
   
       legend: { 
   
        display: false 
   
       }, 
   
       scales: { 
   
        xAxes: [{ 
   
         scaleLabel: { 
   
          display: true, 
   
          labelString: 'Blowing Time (min)' 
   
         } 
   
        }], 
   
        yAxes: [{ 
   
         ticks: { 
   
          beginAtZero:true 
   
         }, 
   
         scaleLabel: { 
   
          display: true, 
   
          labelString: 'Undissolved Lime (tonnes)' 
   
         } 
   
        }] 
   
       } 
   
      } 
   
  });

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
   
  <canvas id="graph-1-met"></canvas>

  내가 몇 가지를주의 싶습니다

  이

  내가이 차트를 만드는 데 사용했던 코드 실제 레이블 (예 : [0,1,2,3,4,...])이면 검은 색 은이 표시되지 않습니다. 빈 문자열 ('')을 사용하여 무언가가 잘못되었다고 믿게합니다.

• 레이블을 [0,1,'','',...]으로 변경하면 검정색 선이 ''의 첫 번째 항목에 나타납니다. 이 경우에는 세 번째 라벨 위치.

• 문제를 해결하기 위해 눈금 선 색상을 흰색으로 설정하려고 시도했는데 이로 인해 검은 선이 더 이상 나타나지 않습니다. 불행히도,이 솔루션은 그래프를 상당히 악화되게 만듭니다.

질문 :이 검은 선이 나타나는 이유는 무엇입니까? 제거하는 방법이 있습니까? 좋아

Answer 1

,이 이상한 될 수도 있지만 난 그냥 labels 배열에서 모든 ''을 제거하고해야 것처럼 렌더링합니다.

jsFiddle

Chart.defaults.global.elements.point.radius = 2; 
 

 
var ctx = document.getElementById("graph-1-met"); 
 

 
var myLineChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
    labels: [0, , , , , 1, , , , , , 2, , , , , , 3, , , , , , 4, , , , , , 5, , , , , , 6, , , , , , 7, , , , , , 8, , , , , , 9, , , , , , 10, , , , , , 11, , , , , , 12, , , , , , 13, , , , , , 14, , , , , , 15, , , , , ], 
 
    datasets: [{ 
 
     data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55], 
 
     backgroundColor: "rgba(0,204,255,0.2)", 
 
     borderColor: "rgba(0,204,255,1)", 
 
     borderWidth: 2, 
 
    }] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Blowing Time (min)' 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     ticks: { 
 
      beginAtZero: true 
 
     }, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Undissolved Lime (tonnes)' 
 
     } 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
 
<canvas id="graph-1-met"></canvas>