web-dev-qa-db-ja.com

ハイチャートが完全に読み込まれるのはいつですか？

私はこのコードを見ました： http://jsfiddle.net/AVygG/

ハイチャートが完全に読み込まれるポイントはいつですか？ events：load：は、ハイチャートが完全に読み込まれたときにコールバック関数を呼び出すことができるという魔法を実行する必要があることをハイチャートのドキュメントで確認しました。

それが完全にロードされている場合、アラートがポップアップしたときにvar chartにすでに値があるはずだと思いますか？それは、チャートがすでにロードされていることの良い根拠ですか？

私が尋ねた理由は、ハイチャートがIE8で完全にロードされないように見える別のコードに取り組んでいるためです。ハイチャートが要素の読み込みで競合状態になっている可能性があります。

ありがとう！

$(function () {
// create the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                alert ('Chart loaded');
            }
        }        
    },
    xAxis: {
    },

    series: [{
        animation: false,
        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]     
    }]
});

}）;

jqueryhighcharts
23
user1334004

ハイチャートにはコールバック関数があります

 var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        series: [{
            animation: false,
            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]     
        }]
    },function(chart){

alert('LOADED');

});
24
Sebastian Bochan

ロードコールバック関数では、「this」ポインターを使用してチャートオブジェクトにアクセスできます。

        events: {
            load: function(event) {
                alert ('Chart loaded with series :'+ this.series[0].name);
                console.log(this);
            }
        }

JsFiddle： http://jsfiddle.net/msjaiswal/AVygG/25/

8
Mayank Jaiswal

redrawイベントで試してください。このイベントは、ロード後にトリガーされますが、系列が追加されてグラフのサイズが変更された後にもトリガーされます。

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        series: [{
            animation: false,
            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]     
        }]
    });
});

公式のHighchartsリファレンスからのイベントの再描画： http://api.highcharts.com/highcharts#chart.events.redraw

そしてデモ： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

8
ManUtopiK

これは答えられましたが、十分に強調されていませんでした。 Highchartsのドキュメントには明示的に書かれています

...ほとんどの場合、グラフは1つのスレッドで作成されますが、Internet Explorerバージョン8以下では、ドキュメントの準備が整う前にグラフが開始される場合があり、これらの場合、new Highcharts.Chart()。結果として、新しく構築されたChartオブジェクトに依存するコードは、常にコールバックで実行されます。

したがって、IE8でチャートオブジェクトを処理する行わなければならないコールバック、つまりnew Highcharts.Chart(options, function(chart) { ... })で。関数でfunction() { ... }を使用し、thisを使用することもできます。

あなたの特定の懸念に関しては、メッセージをロードしています。コールバックで実行する必要がありましたが、動作します。

chart1 = new Highcharts.Chart(options, function(){
  this.showLoading();
});
2
carlosayam

angular projectでは、幅を適切に機能させるためにsetTimeout()関数を使用する必要がありました。

setTimeout(()=>this.chart.reflow())
0
User3250