0

横積み棒グラフを描いています。各バーの上下のスペースを制御したい。以下を使用して、各バー自体の高さを指定できます。

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

ただし、チャーティストは、グラフ全体に指定した高さに基づいて、各スタックの周囲のスペースを決定しているようです。代わりに、各スタックの周囲の高さを指定し、描画するバーの数に基づいてチャートの高さを大きくしたいと考えています。

chartist の API/ドキュメントを見てきましたが、探している設定が見つかりません。また、グラフの高さを設定しないようにしましたが、チャーティストは利用可能な高さ全体を使用し、利用可能な高さに基づいてバーを配置します。

バーの周りの間隔を制御する方法はありますか (バーの幅そのものではありませんか?)。

編集:私がやろうとしていることの例はこれです: https://gionkunz.github.io/chartist-js/examples.html#stacked-bar その積み上げ棒グラフでは、Q1、Q2、Q3 などが表示されます。チャーティストによって自動的に決定されるのではなく、これらのそれぞれが占めるスペースの量を制御したいと考えています。

4

1 に答える 1

1

そのため、コードを使用せずに、サイトの「例」セクションにある水平バー コードの例から作業を進めました。

線は、x & y 属性が指定された長方形として作成される svg です。

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

したがって、フレームワークで既に計算された後に調整したい場合は、CSS 変換関数を使用できます。ここでは、一連の B のみを調整して、最初のセットの水平バーが変更されないようにします。

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

CSS3 変換用の MDN に関するドキュメントは次のとおりです: translate 。

于 2016-06-22T15:53:27.913 に答える