質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.37%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,188

Naoki.Akiyama

score 11

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/08 16:34

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る