Movable Type 備忘録

 パイ・チャートを表示してみる（amCharts）

こんにちわ^^

昨日のオーストラリア戦、PK 戦だったけど日本代表勝ちましたねっ!! ベスト4 進出ですよぉ (●´∀｀●) ♪
延長戦にもつれ込んだ挙句 PK 戦だったせいか、(* ￣▽)o□ 氷結 □o(▽￣ *) を飲み過ぎたようで、気づいたらリビングで寝ちゃってました (;￣∇￣A

今大会で勝利すればアジアカップ 3 連覇だそうです。
ヽ(∇⌒ヽ) 日本代表がんばれぇ～!! (ノ⌒∇)ノ

さて気をとり直して、今回はパイ・チャートに TRY してみました。

わたしのサイトでは、カテゴリ別に投稿されたエントリの統計をパイ・チャートで表示させてます。
トップページのサイドバーに表示してる円グラフがそれです。

You need to upgrade your Flash Player

今回はこちらの amCharts さんのパイ・チャートを利用させてもらいました。
JavaScript + Flash で表示することができます。

あらかじめ用意されている XML ファイルによってパイのサイズ、色などの細かな設定が可能になってます。
データタイプも 'XML' or 'CSV' から選択可能です。

また、パイ・チャート以外にもドーナツ・チャートとして設定することもできます。
パイ・チャート以外にも折れ線グラフ、棒グラフなどもラインナップされてます。

以降で、パイ・チャート表示のための手順を記します。

ダウンロード

まず、必要な Flash 素材や XML ファイル(コンフィグファイル)など一式を以下のページからダウンロードします。
customizable flash Pie & Donut chart

ダウンロードしたら適当なフォルダに展開して、すべてのファイルをサーバにアップロードします。
アップロード先はどこでも構いません。

サンプル 4 のディレクトリ構成

いくつかのサンプルがありますので、その中のサンプル 4(examples/ampie4.html)のディレクトリ構成について以下に記します。

  1. http://●●●.com/
  2.   |
  3.   +-- ampie/
  4.   | +-- examples/
  5.   | | +-- ampie4/
  6.   | | | +-- ampie_data1.txt <-- パイ・チャート1用のデータファイル
  7.   | | | +-- ampie_data2.txt <-- パイ・チャート2用のデータファイル
  8.   | | | +-- ampie_settings1.xml <-- パイ・チャート1用のコンフィグファイル
  9.   | | | +-- ampie_settings2.xml <-- パイ・チャート2用のコンフィグファイル
  10.   | | |
  11.   | | +-- ampie4.html
  12.   | |
  13.   | +-- ampie/
  14.   | | +-- ampie.swf <-- パイ・チャート表示用 Flash (変更不用)
  15.   | | +-- swfobject.js <-- パイ・チャート表示用 JavaScript(変更不用)
  16.   | |

パイ・チャート表示用タグについて

サンプル 4(examples/ampie4.html)をベースに、パイ・チャート表示用のタグについて以下に記します。

examples/ampie4.html

  1. <script type="text/javascript" src="../ampie/swfobject.js"></script>
  2. <div id="flashcontent1">
  3. <strong>You need to upgrade your Flash Player</strong>
  4. </div>
  5.  
  6. <script type="text/javascript">
  7.     // <![CDATA[
  8. var so = new SWFObject("../ampie/ampie.swf", "ampie1", "260", "200", "8", "#FFFFFF");
  9.     so.addVariable("path", "../ampie/");
  10. so.addVariable("settings_file", escape("ampie/ampie4/ampie_settings1.xml"));
  11. so.addVariable("data_file", escape("ampie/ampie4/ampie_data1.txt"));
  12. so.addVariable("preloader_color", "#999999");
  13.     so.write("flashcontent1");
  14.     // ]]>
  15. </script>

青い字の部分で 'swfobject.js' をロードしてます。
データファイル、コンフィグファイルを元にした Flash を表示するための JavaScript のようです。

カーキ色の部分で、Flash(ampie.swf) のパス、パイ・チャート表示のエリアサイズや、背景色などを指定します。

赤い字の部分にパイ・チャートが表示されます。
緑の字の部分では表示するデータファイルおよび、コンフィグファイルを指定します。

コンフィグファイル調整

サンプル 4(examples/ampie4.html)をベースにコンフィグファイルをイジリまくって、自分好みの表示を見つけます。
サンプル 4 では、2 つのパイ・チャートが表示されますが、各チャートのコンフィグファイルは以下の場所にあります。

  • examples/ampie/ampie4/ampie_settings1.xml
  • examples/ampie/ampie4/ampie_settings2.xml

とりえあず、パイ・チャート 1 のコンフィグ(examples/ampie/ampie4/ampie_settings1.xml)をイジってみましょう。
英文ですがコメントもありますし、各パラメータ名からある程度なら想像が付けられると思います。

コツとしては、チマチマと値を変更するのではなく、大胆に変更することで表示上どのように変化するのかを把握していきます。
把握した後は、チマチマと調整していくと楽ですよ (￣∇￣)b

設定内容が多過ぎるのでここでは説明を省きます。
わたしのサイトで使用してるコンフィグファイル

パイ・チャートを表示してみる

では実際にわたしのサイトで表示してる、投稿エントリのパイ・チャートの説明をしてみます。
これはほんの一例ですので、各自の目的に合わせて変更してください。

まずディレクトリ構成を以下に記します。

  1. http://●●●.com/
  2.   |
  3.   +-- ampie/
  4.   | +-- swfobject.js
  5.   | +-- ampie.swf
  6.   | +-- ampie_data.txt <-- データファイル
  7.   | +-- ampie_settings.xml <-- コンフィグファイル
  8.   | |

基本的に必要なものは上記ファイルのようです。

  1. データファイル(ampie_data.txt)ファイルを作成します。
    以下のコードは、各カテゴリに属するエントリ数をデータファイル(ampie_data.txt)として、エントリ投稿時に自動的に作成するためのものです。

    ampie_data.txt

    1. [title];[value];[pull_out];[color];[url];[description];[alpha]
    2. <MTCategories show_empty="0"><$MTCategoryLabel decode_html="1" remove_html="1" remove_html="1"$>;<$MTCategoryCount$>;
    3. </MTCategories>

    パイ・チャート用データファイルとしてインデックス・テンプレートを新規作成して、上記コードをコピペします。
    そして、ファイル名および、保存先として上記ディレクトリ構成のようにします。

    再構築すると以下のようなデータが作成されます。

    1. [title];[value];[pull_out];[color];[url];[description];[alpha]
    2. MovableType;27;
    3. Template;27;
    4. Customize;182;
    5. Install;13;
    6. Troubleshooting;22;
    7. Tools;86;
    8. Rental Server;3;
    9. Moblog;16;
    10. Books;1;

  2. 次にパイ・チャート表示用のテンプレート・モジュールを作成します。

    テンプレート・モジュール

    1. <div class="module-content">
    2. <script type="text/javascript" src="/ampie/swfobject.js"></script>
    3. <div id="ampie_block"><span class="bold">You need to upgrade your Flash Player</div>
    4. <script type="text/javascript">
    5.     // <![CDATA[
    6.     var so = new SWFObject("/ampie/ampie.swf", "ampie1", "340", "260", "8", "#FFFFFF");
    7.     so.addVariable("settings_file", escape("/ampie/ampie_settings.xml"));
    8.     so.addVariable("data_file", escape("/ampie/ampie_data.txt"));
    9.     so.addVariable("preloader_color", "#999999");
    10.     so.write("ampie_block");
    11.     // ]]>
    12. </script>
    13. </div>

    上記はわたしのサイト用ですが、これを参考に各自で使ってるテンプレートに合わせて変更して保存します。
    モジュール名はお好み(たとえば、Pie Chart)で構いません。

    変更したらパイ・チャートを表示したいテンプレート(たとえば、トップページ)内に以下を追加します。

    1. <$MTInclude module="Pie Chart"$>

    追加したら保存して再構築します。

以上で、カテゴリ別の投稿エントリ数をパイ・チャートで表示することができました (￣∇￣)v
いつものように話をまとめられなくてすいません。

amCharts はコンフィグ設定を動的に変更するこもできそうだし、複数のチャート表示も可能なので、データを差し替えることでいろいろ便利そうです。
ただし、基本的には有償!? なようで、各チャート上部に配布元のリンクが付いてしまいますけどね。

フラッシュの背景を透過にする

フラッシュの背景を透過にするには swfobject.js の内容を少し変更する必要があります。
swfobject.js 内には各 param 要素、embed 要素に動的に値を設定することで任意のサイズのフラッシュを表示できるよう工夫されてます。 その param 要素、embed 要素に「wmode」に「transparent」を追加することで対応可能です。
具体的には以下のようになります。

  1. embed に wmode を追加します。

    swfobject.js 内から embed を検索してください。そして以下のように追加します。

    embed 要素に wmode を追加

    1. <embed wmode=\"transparent\" type=\"

    青字の部分を追加します。

  2. param に wmode を追加します。

    同様に param を検索して以下のように追加します。

    wmode 用の param 要素追加

    1. 19+="<param name=\"wmode\" value=\"transparent\" /><param name=\"movie\"

    先程と同様に青字の部分を追加ｓます。

以上です。
一応サンプルとしてわたしが使ってる swfobject.js を置いておきます。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード