1

これがブートストラップの問題なのかハイチャートの問題なのかはわかりませんが、チャートのサイズを正しく設定できないようです。スクロールバーが存在し、ブートストラップスパンにある場合、最初のチャート幅が広すぎます。ウィンドウのサイズを変更しても、幅が広すぎるようには見えませんが、幅が狭すぎる場合があります。

span コンストラクトからコードを削除すると、すべての状況で適切な幅が得られるように思われるため、hc とブートストラップの間に何らかの有害な相互作用がある可能性があると考えています。

デモンストレーション用にフィドルを作成しましたが、スクロールバーが表示されるようにブラウザ ウィンドウを十分に短くする必要があることに注意してください。

http://jsfiddle.net/xEtherealx/Q5EGX/15/

css を介して幅を強制的に一致させる方法はありますか? 回避策としてウィンドウのサイズ変更時にコールバックを作成できますが、代わりに適切な解決策を見つけたいと思います。

編集: 示唆されているように、以下は回避策であり、タイムアウトの後に、またはページの読み込み後に 1 回だけ呼び出すことができます。

    this.setChartSize = function() {
        chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() );
        return false;
    };

HTML:

<div id="content" class="container-fluid">
    <div class="row-fluid">
        <div id="toresize" class="span3" style="background: gray; overflow: auto;">
            <div class="targetpane">
                 <h4 class="text-center">HC Sizing Test</h4>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>

                <!-- Chart -->
                <div class="well well-small" style="padding: 5px;">
                    <div id="barchart" style="height: 160px; margin-bottom: 5px;"></div>
                </div>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>
            </div>
        </div>

        <!-- span -->
        <div class="span9" style="background: gray;">
            <div class="myBorder">Some content</div>
        </div>
    </div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.well
{
    background-color: #444;
}

.targetpane
{
    color: #888;
    background-color: #1B1B1B;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0px 5px 0px 5px;
}

.bodycontainer {
    height: 50px !important;
    white-space: nowrap;
    overflow-x: hidden;
}

JS:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'barchart',
        borderWidth: 1
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

$(window).resize(function () {
    $('#toresize').height($(window).height() - 3);
    console.log($(window).height());
})
$(window).resize();
4

3 に答える 3

5

問題は、ページが読み込まれると、Highcharts のコンテナーの幅が異なることです。レンダリング時間 (1 ミリ秒以上かかる) が原因だと思うので、可能な解決策は、レンダリング後にチャートの幅と高さが適切であることを確認することです: http://jsfiddle.net/Q5EGX/17/ (コンソールのコメントを参照)

setTimeout(function() {
      chart.setSize($("#barchart").width(), $("#barchart").height());
}, 1);
于 2013-06-03T11:05:17.947 に答える
2

Highcharts chart.event.load documentationごとにそれを追加するだけです:

バージョン 2.0.4 から、Highcharts.Chart への 2 番目のパラメーターもあり、chart.loadで実行するためにコールバック関数を渡すことができます。

次のように初期化する場合に便利です。

    $("#chart").highcharts(options, function(e){
        setTimeout(function() {
            e.setSize(container.width(), container.height());
        }, 1);

または、JSON 構成オプションを保存していて、この繰り返されるコードの重みを持ち歩きたくない場合。

于 2013-08-16T21:14:42.777 に答える
0

.highcharts-loading クラスの幅を強制的に 100% にすることで、CSS でこれを解決できることがわかりました。を追加する必要があります。要素はインライン スタイルに設定された幅を取得するためです。

        .highcharts-loading {
            width: 100% !important;
        }
于 2014-05-08T00:25:42.560 に答える