Chartist의 긴 레이블을위한 공간

Question

저는 Graphist를하기 위해 Chartist를 사용하여 Framework7에 작은 애플리케이션을 구축하고 있습니다. 예를 들어, 나는 이것에 대한 간단한 설명을 만들었다. 여기에서 볼 수 있습니다 : https://jsfiddle.net/emergingdzns/hpr6u8uk/1/

문제는 (예에서 볼 수 있듯이) 세로 막대의 긴 레이블이 잘리지 않는다는 것입니다. 그걸 고칠 방법이 있니? 여기

// Initialize your app 
var myApp = new Framework7(); 

// Export selectors engine 
var $$ = Dom7; 

var dataChart1 = [ 
    26400, 
    50500, 
    73200, 
    101100 
]; 

new Chartist.Bar('#coveredChart', { 
    labels: ['1. Everyone has to have health insurance.', 
    '2. People can choose to have - or not have - health insurance.', 
    '3. People with pre-existing conditions are excluded.', 
    '4. Of those with health insurance, one becomes ill.' 
    ], 
    series: [dataChart1] 
}); 

는 HTML입니다 : 여기

은 자바 스크립트의 차티스트와

<div class="views"> 
    <!-- Your main view, should have "view-main" class--> 
    <div class="view view-main"> 
    <!-- Top Navbar--> 
    <div class="navbar"> 
     <div class="navbar-inner"> 
     <!-- We have home navbar without left link--> 
     <div class="center sliding">ClareFolio</div> 
     </div> 
    </div> 
    <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes--> 
    <div class="pages"> 
     <!-- Page, data-page contains page name--> 
     <div data-page="covered" class="page"> 
     <!-- Scrollable page content--> 
     <div class="page-content"> 
      <br> 
      <div class="content-block-title" style="text-align:center;">Example chart below</div> 
      <div class="content-block"> 
      <div class="content-block-inner"> 
       <div class="chart"> 
       <div id="coveredChart" class="ct-chart ct-golden-section"></div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

아이디어,이 프리젠 테이션과 데이터의 분리, 그래서 모든 차트 요소를 통해 액세스 할 수 있다는 것입니다 Css.

이

.ct-chart-bar{ 
padding-bottom: 140px; 
} 

당신은 어느 경우에, 당신의 프레임 워크 컨테이너 작업 및 크기 조정에 재 계산을 조정해야 할 수있는 관리자는 다음과 같습니다

당신이 경우

,이 같은 뭔가 차트 컨테이너 하나를 목표 것 너의 가장 친한 친구.

또는 라벨에 액세스하려면 :

span.ct-label.ct-horizontal.ct-end {} 

또한, UI에서 당신의 레이블이 긴 경우/UX 데이터 시각화의 관점은, 당신은 거의 확실 프레젠테이션의 실수를 가지고 향하고있다 차트 쓰레기 영역으로. 이것은 실제로 가장 쉬운 해결책입니다. 짧은 레이블을 추가하는 것 뿐이므로 제목이 도움이 될 수도 있습니다.

데이터를 읽으면 (사실상 더미 데이터인지 확실하지 않음), 동일한 차트에서 해당 데이터 세트를 갖는 것이 실제로 의미가 없습니다.