Highchartsで複数をグラフを表示し、同一HTMLで違うグラフをタブ切り替えで表示したい

Question

Highchartsで掲題の表示を試みています。

graphA.addSeries()メソッドを使いループロジックを組み表示しましたが、最初のグラフAは上手く出来たのですが、グラフBはgraphB.addSeries()メソッドで以下のエラーになります。

NS_ERROR_FAILURE:  
...Ga(Z,"dy",M)}P=Z}Ga(Z,C);b.appendChild(Z);z++;if(m){y=y.replace(/-/g,"- ").split...

お分かりになる方、ご教示くださいませんでしょうか？

graphA、graphB.は、次ページのような記述をしてます。

var  graphA = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'graph1_img' 
        }, 
        credits: { 
            enabled: false 
        }, 
        title: { 
            text: null 
        }, 
    ・ 
    ・ 
 }); 
var  graphB = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'graph2_img' 
        }, 
        credits: { 
            enabled: false 
        }, 
        title: { 
            text: null 
        }, 
    ・ 
    ・ 
 });

表示が正しく出来たgraphA のロジック

    for( var j=1; j < csv_array[0].length; j++ ) 
    {   // ADD series: 
        if( j == 4 || j == 1 ) 
        {    graphA .addSeries( { name: dtname[j], data: dataSeries[j],  lineWidth: 0.5 }); 
        } else 
        {   graphA .addSeries( { name: dtname[j], data: dataSeries[j],  lineWidth: 0.5, visible: false }); 
        } 
    } 

表示がエラーのgraphBの記述

    graphB.addSeries( { name: dtname[17], data: dataSeries[17], lineWidth: 0.5 }); 

この行を削除すると表示は出来ます。

ブラウザ
Firefox 46.0.1 _2016/05/03
Chrome 51.0.2704.79 m

ライブラリ
jquery-1.7.2.min.js
jquery-ui-1.8.20.custom.min.js
Highcharts JS v2.1.9 (2011-11-1

Answer 1

質問文で提示されているソースだけでは確認できないため推測ですが、おそらくgraph2_imgがdisplay="none"になっていませんか？

一度タブの切り替えは後回しにしてgraph1_imgとgraph2_imgが両方表示されている状態で試して見てください。
両方表示している状態で問題がなければ当たりだと思いますので、タブを切り替えて表示するタイミングで実谷するようにすれば大丈夫ではないかと思います。

Comments

[Naoki.Akiyama]

hide2e3rさん
ご指摘通り『display="none"』がｃｓｓに有りました。タブ切り替えで表示を行っていたため「#tabs ul{ display: none; }」が'graph2_img'の初期状態に成ってました。

試にタブ切り替えを止めて（画面がスクロールする形式で）実行した結果、正常に表示が出来ました。

迅速かつ適切なご回答ありがとうございました！