Movable Type 備忘録

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

Jul222007
Author: bzbell
Categories: Customize
Tags: amCharts, Customize, MovableType

Prev Page: prototypeで記事内容をアコーディオンのように表示する（Accordion.js）
Next Page: MovableType 4 から追加された変数

こんにちわ^^

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

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

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

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

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

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

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

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

ダウンロード

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

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

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

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

http://●●●.com/
|
+-- ampie/
|    +-- examples/
|    |    +-- ampie4/
|    |    |    +-- ampie_data1.txt     <-- パイ・チャート1用のデータファイル
|    |    |    +-- ampie_data2.txt     <-- パイ・チャート2用のデータファイル
|    |    |    +-- ampie_settings1.xml <-- パイ・チャート1用のコンフィグファイル
|    |    |    +-- ampie_settings2.xml <-- パイ・チャート2用のコンフィグファイル
|    |    |
|    |    +-- ampie4.html
|    |
|    +-- ampie/
|    |    +-- ampie.swf                <-- パイ・チャート表示用 Flash     (変更不用)
|    |    +-- swfobject.js             <-- パイ・チャート表示用 JavaScript(変更不用)
|    |

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

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

examples/ampie4.html

<script type="text/javascript" src="../ampie/swfobject.js"></script>
<div id="flashcontent1">
<strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("../ampie/ampie.swf", "ampie1", "260", "200", "8", "#FFFFFF");
so.addVariable("path", "../ampie/");
so.addVariable("settings_file", escape("ampie/ampie4/ampie_settings1.xml"));
so.addVariable("data_file", escape("ampie/ampie4/ampie_data1.txt"));
so.addVariable("preloader_color", "#999999");
so.write("flashcontent1");
// ]]>
</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

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

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

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

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

http://●●●.com/
|
+-- ampie/
|    +-- swfobject.js
|    +-- ampie.swf
|    +-- ampie_data.txt      <-- データファイル
|    +-- ampie_settings.xml  <-- コンフィグファイル
|    |

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

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

再構築すると以下のようなデータが作成されます。
```
[title];[value];[pull_out];[color];[url];[description];[alpha]
MovableType;27;
Template;27;
Customize;182;
Install;13;
Troubleshooting;22;
Tools;86;
Rental Server;3;
Moblog;16;
Books;1;
```
次にパイ・チャート表示用のテンプレート・モジュールを作成します。
テンプレート・モジュール
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"$>
追加したら保存して再構築します。