【初心者用】 Highchartsの使い方2 FC2ブログへの表示方法

 前回はHighchartsを「一応表示出来るようになる」という所までを紹介しましたが
(前回の方法やってみたけど使えないぞ!!という方、コメントください)
 今回はHighchartsをブログに表示する方法を紹介したいと思います。

「いやいや、前回作ったコードを記事にコピペするだけだろ?」

私も最初そう思ってました。
ですがそれだけではダメでした(;;)
どうすればHighchartsをブログにちゃんと表示できるのか…一緒に見ていきましょう!

今回は現在私が使っているFC2ブログへのHighchartsの表示方法を説明していきます。



1、まず前回作ったHighchartsのコードをまるごと記事内にコピペします。


2、記事編集画面の下の方の「記事の設定」の中にある「改行の扱い」を「HTMLタグのみ」に変更します。
  こうすることで、記事内に書かれた文字列がコードとして認識されグラフを表示する事が可能になります。

  ※改行の扱いをHTMLタグのみに変更すると改行が自動的に行われなくなります。
   これまで改行は自動でやってくれてましたが、Highchartsのコードを記事内に入れる時は改行したい所で
   各自で<br>を入れる必要があります。(Highchartsのコードの部分に関してはコピペしたまんま、特に
   いじる必要はないので安心してください)
   この<br>が必要になるのはグラフの上や下に説明文を入れる時ですね。これに関しては慣れれば
   どうってことはないです。<br>の使い方が良く解らない人は「改行 HTML」とかでググればすぐ出ます。


3、この状態で「記事の保存」ボタンを押します。
  ブログを確認してみてください。多分グラフはちゃんと表示出来ていると思いますが、ブログが変な事に
  なっていると思います。私はここで随分悩まされました(T_T)(親切な方に教えてもらいなんとか解決しました!)

  ブログが変な事になったのは、Highchartsのコードの上の方にあるrenderTo: 'container'という部分に
  原因がありました。containerというのがブログのテンプレートにもよく使用されているようでHighchartsの
  コードにもこのcontainerを使用した為に変な事が発生したのです。
  解決策として、Highchartsのコードを作る時にこのrenderTo: の中身をcontainerから違う名前にすれば
  okです。例えば簡単にrenderTo: 'container2'でも大丈夫ですし'yuruyuri55'とかなんでもオッケイです
  
  気を付けて欲しいのはHighchartsのコードの下の方にも
  div id= 'container'というのがありますので、そこも上と同様に変更する必要があります。
  上と下の名前は統一しないと上手く表示できないので、例えばrenderToはcontainer2、div idは
  container3の様に上下で違う名前にしてしまうとグラフは表示されません。container2かcontainer3で
  統一してください!


4、3で見たように、renderTo と div id の中身を変更・統一して「記事の保存」を行い
  ブログを確認すれば、今度は上手く表示出来ているはずです。
  (表示できない方はコメントください!ただ私もFC2でしかやっていませんので他のブログに関しては力に
  なれないかもしれません。)
  あと、ここ大事なんですがグラフを複数個ブログに載せる時は、グラフごとにrenderToとdiv idの中身を
  変える必要があります。(私の場合container24 container25の様に単に数字を増やして
  管理しやすくしてます)この作業を忘れると、またブログが変な事になりますので注意が必要です。

  renderTOとdiv idの中身の変更は、メモ帳でHighchartsのコードを色々いじる前にやってしまったほうが
  いいと思います。ブログの記事内にコピペした後に、変更してもいいのですが忘れがちなので…



  以上が「Highchartsをブログに表示する編」になります。
  上手くいきましたでしょうか?
  上手くいかない時は気軽にコメントしてください!
  私も初心者なので専門的な事は解らないかもしれませんが…焦

  また具体的なHighchartsのいじり方(軸の設定や色の変更、グラフの形状等…)は
  前回も言いましたが「習うより慣れろ」だと思いますので、色々なサンプルを見比べつつ
  自分であれこれカスタマイズしてみましょう!私もなるべく色々なものにチャレンジしたいと思います

  また気が向いた時に使い方3をお届けします。

  Highchartsの使い方1はこちら
関連記事
  
このエントリーをはてなブックマークに追加


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


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事