Datas는 chart.js에서 서로를 연결합니다.

Question

Chart.js에서 마지막 셀을 자르므로 데이터가 서로 겹칩니다. 어떻게 해결할 수 있습니까? http://prntscr.com/eltpni

다음은 차트의 설정을 제공하지 않았기 때문에, 나는 당신이 게시 된 이미지를 기반으로 시간 단위를 사용하는 가정입니다 내 설정

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     datasets: [] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
       type: 'time', 
       time: {        
        displayFormats: { 
         quarter: 'MMM YYYY' 
        }, 
       } 
      }] 
     }, 
     responsive: false, 
     maintainAspectRatio:false, 
     legend: { 
      display: false 
     } 
    } 
}); 

Answer 1

입니다.

불행히도 chart.js는 모든 형식 변형 및 가능성 때문에 시간 축 x 축을 자동 맞춤하는 데 문제가 있습니다. 이 문제를 해결하기 위해 두 가지 중 하나를 수행 할 수 있습니다. 차트 컨테이너의 크기를 확장하여 (차트를 렌더링 할 공간이 넓어 지도록) 시간 모양을 수동으로 구성하여 모양을 최적화하십시오.

예를 들어, time.unit 속성을 사용하면 축척을 '초'단위로 표시 할 수 있습니다. 여기

scales: { 
    xAxes: [{ 
    gridLines: { 
     display: false, 
    }, 
    type: "time", 
    time: { 
     unit: 'second', 
    } 
    }] 
} 

가 무슨 뜻인지 설명하는 codepen입니다 : 여기에 관련 설정입니다.

명심해야 할 점은 구성 단위가 그래프의 데이터를 이해하는 데 필요하다는 것입니다. 예를 들어, 시간 단위를 seconds으로 설정하려고하면 데이터가 여러 시간 또는 하루에 걸쳐 발생하면 페이지가 충돌합니다 (chart.js는 수천 개의 눈금 선/눈금을 그려야하기 때문에 ...). 초당)