【IE対策】highchartsがIEで表示されない問題を解決・解消させる!

highchartsでグラフを作っていると、他のブラウザでは正常にグラフが表示されるのにIE(Internet Explorer)閲覧時のみ表示されない、ということがあります。私のブログも長い間、IEでグラフが表示されない状態がずっと続いておりました。

他のブラウザでは表示出来ているのになぜ?と思い、何度もコードを見直したのですが見た感じ間違っておらず、原因不明のままだったのですが、先日その原因が「stray commas=浮遊コンマ」であることがわかりました。浮遊コンマとは、本来必要ない所に付いているコンマのことで具体的には以下のようなものです。(2013/03/17 追記 以前はhighchartsの公式HP上のFAQで浮遊コンマの説明がされており、そのリンクを張っていたのですがどうやらリンク先のFAQが消えているようなので今回改めて説明しています)。具体的には、浮遊コンマは以下のようなものです。
 
~~

yAxis: [{
            title: {
                text: 'Primary Axis',
                style: {
                color: '#AAAAAA'
                      }
            }
        }, {
            title: {
                text: 'Secondary Axis'
            },
            opposite: true,
        }],
~~

どれが浮遊コンマか分かりますか?答えはopposeite: trueの後に付いているコンマです。
御存じのようにhighchartsでは、複数のコードで記述されるブロックやセクション(xAxis、yAxis、tooltip、plotOptions等)の最後のコードの後にはコンマは必要ありませんが、他のチャートからブロックやセクションのコードを丸ごとコピーとかしていると浮遊コンマを取り忘れることがあります。chromeやfirefoxでは、このコンマがあっても問題なくグラフが表示されるのですが、IEではグラフが表示されなくなってしまいます。
浮遊コンマありのグラフは以下のようになります↓

Highcharts Example
現在IEでこのページを見ている方はグラフが表示されずに空欄になっていると思います。
chrome、firefox、スマホ等で見ている方はちゃんと表示されていると思います(正常にされてない方はお手数ですがコメント欄にて教えてくださると助かります^^;)。

そして下のグラフが上のグラフから浮遊コンマを除いたグラフになります↓
こちらはブラウザに関係なく正常に表示されていると思います。

Highcharts Example

原因は細かい所でしたが、いかんせん初心者なのでかなり時間を取られてしまいました。
以上を踏まえてもやっぱりブラウザはchromeに限ります。軽くてシンプルで使いやすい!!

関連記事
  
このエントリーをはてなブックマークに追加


■よく読まれている人気記事


コメントの投稿

非公開コメント

No title

浮動コンマでIE表示されません状態でした。
大変助かりました。
しかし、他にもIEだと
・ラベルのローテーションがされない
・X軸の凡例がグラフに重なる(崩れる)
・ドリルダウン後に戻るボタンでもグラフが戻らない
といった問題が起こっています。(IE10)
上記問題について、何かしら情報が頂けると助かります。
Index for HighCharts FreQuent
author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事