web-dev-qa-db-ja.com

Echartsとbootstrap：レスポンシブ幅

（Baiduからの）Echartsを使用して、div要素内に円グラフを配置します（私はブートストラップを使用しています）。

ので、私は持っています：

<div class="row">
   <div class="col-md-4">
      <div id="chartGift" style="height:400px;"></div>
    </div>
</div>

公式ドキュメントからJavaScriptコードを取得しました https://ecomfe.github.io/echarts/doc/example/pie1.html#-en

問題は、HTMLコードを調べると幅が0であるので、パイが表示されないことです。なぜechartsが親要素から幅を設定しないのですか？グラフが反応しないため、静的な幅を設定したくありません（うまくいくことがわかります）。

javascriptcsstwitter-bootstraptwitter-bootstrap-3echarts
9
Tom

固定の高さを設定するだけの場合は、幅をコンテナの100％に設定して、最小の高さを設定してみてください。

<div id="chartGift" style="width: 100%; min-height: 400px"></div>

それは私のために働いた！さらに、グラフが反応することを確認したい場合は、ウィンドウのサイズが変更されたときに、そのサイズを強制的に変更することもできます。このような：

    $(window).on('resize', function(){
        if(chart != null && chart != undefined){
            chart.resize();
        }
    });

お役に立てば幸いです。

28
MaryJane

購入した管理テンプレートに解決策が見つかりました。コンテンツが読み込まれた後にグラフを初期化することで解決策がありました。これが実際の例です：

    $(document).ready(function () {

        setTimeout(function () {

            // based on prepared DOM, initialize echarts instance
            var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons');
            // specify chart configuration item and data
            var option = {..options of chart here ..}


            // use configuration item and data specified to show chart
            myChart.setOption(option);


        }, 100);

    });

チャートコンテナーのスタイルは次のとおりです：style = "height：400px; width：100％; echartツールボックスを使用している場合は、コンテナーの外側に移動することが重要です。

それが役に立てば幸いです:)

1
Szymon Perski