2016-06-22 4 views
0

私は水平の積み重ね棒グラフを描いています。私は各バーの上下のスペースをコントロールしたい。しかし、チャーティストは、あなたがグラフ全体に指定した高さに基づいて、各スタックの周りにスペースを決定しているようだchartist.jsでスタックされたバーの周りのスペースを制御

.ct-bar{ 
    stroke-width: 30px; 
} 

を:あなたが使用して、各バー自体の高さを指定することができます。代わりに、各スタックの周りの高さを指定し、描画するバーの数に基づいてグラフの高さを増加させたいと思います。

chartistのAPI /ドキュメントを見ましたが、私が探している設定が見つかりません。私はグラフの高さを設定しないようにしようとしましたが、チャート作成者は利用可能な高さに基づいて棒グラフを空けるだけで十分な高さを使用します。

バーの周りのスペースを制御する方法はありますか(バーの幅自体ではありませんか?)。

EDIT: 私がやろうとしています何の例はこれです:あなたはQ1、Q2、Q3、などを参照してくださいその積み重ね棒グラフで https://gionkunz.github.io/chartist-js/examples.html#stacked-bar 私はこれらのそれぞれがとるスペースの量を制御したいですそれは自動的にチャート作者によって決定されるよりもむしろ。

答えて

0

コードなしで、サイトのExamplesセクションの水平バーコード例を処理しました。

ラインは、x & yの属性を長方形として作成されsvgsているあなたはそれがすでにフレームワークと計算されていた後、それを調整したいのであれば、あなたはCSS機能を翻訳し使用することができ

<line y1="29.0892857142857" y2="29.0892857142857" x1="80" x2="289.1640625" class="ct-bar" value="5"></line> 

を指定しました。ここでは、シリーズBを調整して、水平バーの最初のセットが変更されないようにします。

.ct-series-b .ct-bar { 
    transform: translateY(-4px); 
} 

ここには、CSS3 transform: translateのMDNに関するドキュメントがあります。

+0

申し訳ありませんが、私は十分明確ではありませんでした。私の場合、ラベルごとにバーが1つしかないので、実際にはラベル間のスペース(とバー)を制御したいと考えています。私は例を使って投稿を編集しました。 – Stefan

関連する問題