javascript - C3.js の配置とサイズ変更

Question

C3.js を使用してデータを視覚化していますが、グラフの配置とサイズ変更のしくみがわかりません。

チャートを追加/初期化すると、他のすべての要素が移動します。つまり、グラフの水平面に要素を配置することは不可能です。グラフがページに追加されるまで、これは問題ではありません。

私のHTMLコードは次のようになります。

<div id = "ChartContainer">

</div>

私のJavascriptコードは次のようになります:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});

私のCSSコードは次のようになります。

#ChartContainer {
height: 50%; width: 75%;
top: 0%; left: 25%;
position: absolute;
}

#otherElement {
  height: 0%; width: 0%;
  top: 0%; left: 0%;
  background-color: blue;
  position: absolute;
}

Answer 1

c3.js がAPIから提供する幅と高さのプロパティを使用する