【初心者用】 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はこちら
関連記事
  
このエントリーをはてなブックマークに追加

イーロン・マスク 破壊者か創造神か (朝日文庫)
竹内一正
朝日新聞出版
売り上げランキング: 9,596

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


コメントの投稿

非公開コメント


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



最新記事