巷ではGoogle Chart APIが話題になっていますが、
Yahoo!のJavaScriptライブラリ「YUI」にも、グラフを描くCharts機能が追加されていました。
今現在は、experimentalとなっていますので、まだ試験的な扱いのようです。
WebAPI形式で静止画を返すGoogle Chart APIと違って、YUIのChartsはJavaScriptからFlashを操作してグラフ描画しています。
このFlashの部分は、元々Flash Developer Centerでオープンソースとして公開されているもののようです。
YUIからChart機能を使う場合は、Flashのインタフェースを意識せずにJavaScriptの操作のみで使えるようになっています。Flashなので、アニメーション効果をつけたりもできそうです。
このグラフ作成機能の中に、円グラフを作成する機能が含まれているのですが、そいつの色を変える設定で少々てこづったので、設定方法を書いておきます。
円グラフ以外のスタイルについては、ドキュメントに記載があるのですが、円グラフの色を設定する方法については記述が見当たらず、最終的にはFlashのソースとドキュメントを漁ってなんとかたどり着くことができました。
Flash部分のクラスリファレンスがこちらにあります。
ここを見ながら、オプションにどんな値を設定すれば良いか想像していった結果、下記のコードで色を個別に設定することができました。
var mychart = new YAHOO.widget.PieChart( “chart”, opinionData,
{
dataField: “count”,
categoryField: “response”,
series: [
{
style : {
colors : [0xff0000,0xffff00,0x00ff00,0x0000ff,0x00ffff]
}
}
],
expressInstall: “assets/expressinstall.swf”
});
サンプルはこちら
最近のコメント