OpenFlashChart2で日本語をちゃんと表示するパッチ
こんにちは、熊谷です。
前回はOpenFlashChart2を使ってグラフ表示ということで書きましたが、このOpenFlashChart2は一部機能が日本語表示に対応していないため使えない機能があります。
その機能とはX軸のラベルを回転 させる機能です。長いラベル名を複数用いたり項目が多い場合などX軸のラベルが重なり合いとても見にくい状態になります。
こんなときこのラベルに角度をつけることにより、ラベル同士が重なり合うことを防ぐことができ見やすいグラフを生成することが可能になるのですが、OpenFlashChart2では日本語に対応していないため日本語のラベルでこの機能を使うと、
このようにラベルが表示されなくなってしまいます。
そんなことでこれに対応するためのパッチを書きました。
--- elements/axis/XAxisLabels.as.orig 2010-06-28 17:45:47.000000000 +0900
+++ elements/axis/XAxisLabels.as 2010-06-28 17:54:46.000000000 +0900
@@ -2,6 +2,7 @@
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
+ import flash.text.Font;
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import elements.axis.AxisLabel;
@@ -22,9 +23,13 @@
// Ugh, ugly code so we can rotate the text:
//
// [Embed(systemFont='Arial', fontName='spArial', mimeType='application/x-font', unicodeRange='U+0020-U+007E')]
- [Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')]
-
- public static var ArialFont__:Class;
+ [Embed(source='../../ipagui.ttf',
+ fontName = 'ipagui',
+ mimeType = 'application/x-font'
+ )]
+
+ public static var ipagui:Class;
+ Font.registerFont(ipagui);
function XAxisLabels( json:Object ) {
@@ -223,7 +228,7 @@
if( label_style.rotate != 0 )
{
// so we can rotate the text
- fmt.font = "spArial";
+ fmt.font = "ipagui";
title.embedFonts = true;
}
else
内容的には、欧米フォントが指定されている部分があったのでそこを日本語フォントにしているだけです。ここでは日本語フォントファイルとしてipagui.ttfを使用してますが、お好きな日本語フォントファイルを指定して、open-flash-chartディレクトリにそのフォントファイルをあらかじめコピーしておいてください。
で、あとはこのパッチを当ててOpenFlashChart2をコンパイルして完了です。できあがったswfを使ってグラフを表示すると、
こん な感じで表示されます。ただ、フォントを埋め込んでいるためファイルサイズが大きくなってしまいますが、その辺は仕方がない？上手い方法があれば是非教えてください。
ちなみにOpenFlashChart2でこのラベルの回転を行うにはrotateプロパティを使用します。データとなるJSONはこんな感じです。
{
"title":
{
"text":"棒グラフ"
},
"elements":[
{
"type":"bar_filled",
"colour":"#3373CC",
"outline-colour":"#3373AC",
"values":[8,8,1,7,4,8,1,10,7,1,8,5]
}
],
"x_axis":
{
"labels":
{
"labels":[
{
"text":"北海道札幌市",
"rotate":"45"
},
{
"text":"青森県青森市",
"rotate":"45"
},
{
"text":"岩手県盛岡市",
"rotate":"45"
},
{
"text":"宮城県仙台市",
"rotate":"45"
},
{
"text":"秋田県秋田市",
"rotate":"45"
},
{
"text":"山形県山形市",
"rotate":"45"
},
{
"text":"福島県福島市",
"rotate":"45"
},
{
"text":"茨城県水戸市",
"rotate":"45"
},
{
"text":"栃木県宇都宮市",
"rotate":"45"
},
{
"text":"群馬県前橋市",
"rotate":"45"
},
{
"text":"埼玉県さいたま市",
"rotate":"45"
},
{
"text":"千葉県千葉市",
"rotate":"45"
}]
},
"colour":"#898989",
"grid-colour":"#EEEEEE"
},
"y_axis":
{
"colour":"#898989",
"grid-colour":"#EEEEEE"
},
"bg_colour":"#FFFFFF"
}
ということで、日本語が表示できないと困っている方いましたら試してみてください。
