javascript - 一般的な関数で使用すると、jqueryハイチャートが読み込まれませんか?

原文 javascript jquery highcharts

私はjquery HighChartsを使用しています。同じ種類の複数のチャートを作成するための共通の関数を作成したいと思います。
この問題を解決するために、次のような関数を作成しました-

function generateGraph(data) {
   var dates = new Array();        
   var startDate  =  "";
   for (var i = 0; i < data.length; i++) {        
      dates[i] = data[i].date;         
   }
    var productInsight = _comm.getProductInsightArray();
    var productInsight_Array = new Array();
    $.each(productInsight, function(key, value) {
        productInsight_Array.push(key);
    });

   if(dates.length > 0) {
      startDate = dates[0].split("/");
   }

   intervals = 24 *3600 * 1000; //one day       
   var title = $("#DateSearch_analytics_Similar_Stores1").val(); 
   var color = ['#000000', '#FFFFFF', '#000080', '#0000FF', '#808080'];
   var containers =['container1', 'container2','container3','container4', 'container5', 'container6', 'container7', 'container8', 'container9'];

 for(var j=0; j<containers.length; j++)
 {
    var chart = new Highcharts.Chart({
        chart: {
            zoomType: 'x',
            renderTo: containers[j],
            type: 'line',
        },
        title: {
           text:   title
        },
        subtitle: {
           text: document.ontouchstart === undefined ?
               'Click and drag in the plot area to zoom in' :
               'Pinch the chart to zoom in'
        },
        xAxis: {
           type: 'datetime',
           tickInterval: intervals,      
        },

        series: []  
    });

    for(var i=0; i < productInsight_Array.length; i++) {
            var fillData = new Array();
            var counter = 0;
            var productValue = document.getElementById('product-nm').value;
            $.each(dates, function() {
                fillData[counter] = _comm.randomNumberFromRange(_randomNumberStartRange, _randomNumberEndRange);
                counter++;
            });
            chart.addSeries({
                name: productInsight_Array[i],
                type: 'line',
                color: color[i],
                pointStart: Date.UTC(startDate[2], startDate[0] - 1, startDate[1]),
                pointInterval: intervals,
                data: fillData,

            });
         }

    $("text:contains('Highcharts.com')").css("display", "none");
  }
}


ウィンドウの読み込みとボタンのクリックに関するその正常な動作と開発中のグラフ。これらのグラフを9コンテナーに保存していますが、このスクリプトは3番目のコンテナーにグラフを読み込んでおらず、3番目のコンテナーを削除すると、4番目に読み込まれていません。しかし、ドキュメントの読み込みの代わりにボタンをクリックしてこの関数を呼び出すと、問題なく動作します。

すべてのグラフを作成する一般的な機能として、なぜそのハッピングが発生するのか少し驚いています。

あなたの助けが必要です! :(

ありがとう
答え
問題は、マークアップが存在しない関数をロードするときです。このため、ボタンをクリックすると問題なく動作します。ボタンが表示されている場合、すべてのマークアップが既に読み込まれています。

ロード順序を確認します。

また脇にコメント:これをあなたのチャート宣言に入れてください:

credits: {
   enabled: false
}


クレジットメッセージを表示しない場合: "Highcharts.com"。
An example
関連記事

javascript - Cordovaを使用するiOSで外部ソースを使用して画像を表示する

javascript - Node-Webkitがファイルを開けない

javascript - 0x800a138f-JavaScriptランタイムエラー:プロパティ ''の値がnullまたは未定義であり、関数オブジェクトではありません

javascript - IE11でテキスト範囲の開始位置を見つける

javascript - $ .getJSONデータ引数を使用してHTML要素のテキストを変更する

javascript - 同じディレクティブの2つ以上のクリックアウェイを処理する

javascript - Javascript継承-子メソッドの呼び出しは常に親のメソッドを呼び出します

javascript - 範囲でsetStartおよびsetEndを使用しようとするとエラー:Uncaught IndexSizeError: 'Range'で 'setEnd'を実行できませんでした

javascript - マテリアライズ日付ピッカー-アイコンがクリックされたときのレンダリング

javascript - ファイルをPHPに渡し、それを1つのスクリプトでダウンロードする方法は?