chartist.js : 첫 번째 탭의 그래프 크기가 ​​너무 작습니다.

Question

두 개의 탭 레이아웃이있는 페이지가 있습니다. 여기에는 chart.js 그래프가 들어 있습니다. 이 예제에서 찾을 수 있습니다 Codepen 내가 겪고있는 문제는 (위에서 언급 한 펜에서 알 수 있듯이) 첫 번째 탭의 그래프가 다른 그래프에 비해 매우 작다는 점입니다. 그래프 옵션 값이 같지만 .

$(".tab").find(".ct-chart").each(function(i, e) { 
    e.__chartist__.update(); 
}); 

하지만 모든 탭에서 차트의 전반적인 문제를 해결하는 것이 아닌 보여주는/크기 :이 같은 탭의 click에 차트를 업데이트하기 위해 우리를 요청 chart.js github issue에서 언급 한 솔루션을 시도했다 너무 작다. 문서로드시 차트를 업데이트하려고했지만 아무 소용이 없었습니다.

FYI : 더 많은 그래프 (선 그래프)가 동일한 페이지에서 잘 보이는 탭 구조에 있습니다.

Answer 1

display:flex은 차트와 관련하여 문제를 일으켰습니다.이 문제를 일으키는 속성을 가진 활성 클래스가 첫 번째 차트 탭에만 포함되었습니다. 이것이 정말로 필요한가, 우리는이 CSS 속성을 주석 처리 할 수 ​​있으며 문제는 해결된다. 이 속성이 필요한지 알려 주시면 flexbox를 전체 너비로 조정해야합니다.

.tab.active { 
    display:block; 
    //display: flex; 
    //flex-wrap: wrap; 
} 

Codepen Demo