Chartistの長いラベルのためのスペース

Question

私はChart7を使っていくつかのグラフを作成するために、Framework7に小さなアプリケーションを構築しています。一例として、私はこれのjsfiddleを作成しました。 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です：ここで

はjavascriptのだチャーティストと

<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; 
} 

を、いずれの場合にインスペクタがありますあなたの親友。

またはあなたがラベルにアクセスする場合：あなたのラベルは、あなたはほぼ確実に長いプレゼンテーションの間違いを持っ​​ていると向かっているということであれば、UI/UXデータの可視化の観点から、さらに

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

をチャートジャンク領域へこれは実際には最も簡単な解決策です。短いラベルを追加するだけなので、タイトルも役立ちます。

データを読み込む（ダミーデータだけであるかどうかはわかりませんが）、それらのデータセットを同じグラフに含めることは実際には意味がありません。