4

ID セレクターの代わりにクラスセレクターで High charts reflow() 関数を実行しようとした人はいますか?

含む div サイズを切り替える 1 つのボタンを持つ 2 つのグラフがある例を参照してください。もう 2 つのボタンがあります。1 つは ID でチャートをリフローし、もう 1 つはクラスでチャートをリフローします。

クラスセレクターを使用するものは両方のチャートをリフローしていないように見え、そのクラスを使用する最初の要素のみをリフローすることに注意してください。

http://jsfiddle.net/deN74/1/

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div style="width: 600px">
    <div id="container1" class="needreflow" style="width: 400px; height: 300px; margin: 1em; border: 1px solid gray"></div>
    <div id="container2" class="needreflow" style="width: 400px; height: 300px; margin: 1em; border: 1px solid gray"></div>
</div>
<button id="set-div-size" class="autocompare">Toggle container size</button>
<button id="reflow-chart-byid" class="autocompare">Reflow charts by id selector</button>
<button id="reflow-chart-byclass" class="autocompare">Reflow charts by class selector</button>

JS:

$(function () {
    $('#container1').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },

        series: [{
            data: [29.9, 71.5, 106.4]
        }]

    });
    $('#container2').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },

        series: [{
            data: [29.9, 71.5, 106.4]
        }]

    });

    var wide = false;
    $('#set-div-size').click(function () {
        $('#container1').width(wide ? 400 : 500);
        $('#container2').width(wide ? 400 : 500);
        wide = !wide;
    });
    $('#reflow-chart-byid').click(function () {
        $('#container1').highcharts().reflow();
        $('#container2').highcharts().reflow();
    });
        $('#reflow-chart-byclass').click(function () {
        $('.needreflow').highcharts().reflow();
    });
});
4

1 に答える 1

3

.highcharts()これは良い観察であり、関数の実装方法に帰着すると思います。ご覧のとおり、単一の要素でのみ機能するため、クラスセレクターを持つ複数の要素には影響しません。

関数のソース コード(971 ～ 1005 行目) を見ると、次のコードであることがわかります。

/**
 * Register Highcharts as a plugin in the respective framework
 */
$.fn.highcharts = function () {
    ...

    // When called without parameters or with the return argument, get a predefined chart
    if (options === UNDEFINED) {
        ret = charts[attr(this[0], 'data-highcharts-chart')];
    }

    ...
    return ret;
}

戻り値は常に になりますthis[0]。つまり、選択した要素の数に関係なく、最初の要素が返され、複数の要素はまったく処理されません。

-functionは、 -function が操作できるリストを返さないためreflow、 も 1 回だけ実行されます。もしそうなら、関数も複数の要素をサポートしていないと思います。highchartsreflowreflow

.each1 つの解決策は、次のように ( JSFiddle ) 、セレクターで見つけた各コンテナーを反復処理するためにa を使用することです。

$('.needreflow').each(function() { $(this).highcharts().reflow(); });
于 2014-08-01T15:14:12.243 に答える