アシアルの中の人が技術と思いのたけをつづるブログ

OpenFlashChart2で日本語をちゃんと表示するパッチ

タグ [　 Tech　 ]
こんにちは、熊谷です。

前回はOpenFlashChart2を使ってグラフ表示ということで書きましたが、このOpenFlashChart2は一部機能が日本語表示に対応していないため使えない機能があります。

その機能とはX軸のラベルを回転させる機能です。長いラベル名を複数用いたり項目が多い場合などX軸のラベルが重なり合いとても見にくい状態になります。



こんなときこのラベルに角度をつけることにより、ラベル同士が重なり合うことを防ぐことができ見やすいグラフを生成することが可能になるのですが、OpenFlashChart2では日本語に対応していないため日本語のラベルでこの機能を使うと、



このようにラベルが表示されなくなってしまいます。

そんなことでこれに対応するためのパッチを書きました。

  1. --- elements/axis/XAxisLabels.as.orig   2010-06-28 17:45:47.000000000 +0900
  2. +++ elements/axis/XAxisLabels.as        2010-06-28 17:54:46.000000000 +0900
  3. @@ -2,6 +2,7 @@            
  4.         import flash.display.Sprite;
  5.         import flash.text.TextField;
  6.         import flash.text.TextFormat;
  7. +       import flash.text.Font;
  8.         import flash.display.DisplayObject;
  9.         import flash.geom.Rectangle;
  10.         import elements.axis.AxisLabel;
  11. @@ -22,9 +23,13 @@
  12.                 // Ugh, ugly code so we can rotate the text:
  13.                 //
  14.                 // [Embed(systemFont='Arial', fontName='spArial', mimeType='application/x-font', unicodeRange='U+0020-U+007E')]
  15. -               [Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')]
  16. -              
  17. -               public static var ArialFont__:Class;
  18. +    [Embed(source='../../ipagui.ttf',
  19. +      fontName = 'ipagui',
  20. +      mimeType = 'application/x-font'
  21. +    )]
  22. +
  23. +               public static var ipagui:Class;
  24. +    Font.registerFont(ipagui);
  25.  
  26.                 function XAxisLabels( json:Object ) {
  27.                        
  28. @@ -223,7 +228,7 @@
  29.                         if( label_style.rotate != 0 )
  30.                         {
  31.                                 // so we can rotate the text
  32. -                               fmt.font = "spArial";
  33. +                               fmt.font = "ipagui";
  34.                                 title.embedFonts = true;
  35.                         }
  36.                         else

内容的には、欧米フォントが指定されている部分があったのでそこを日本語フォントにしているだけです。ここでは日本語フォントファイルとしてipagui.ttfを使用してますが、お好きな日本語フォントファイルを指定して、open-flash-chartディレクトリにそのフォントファイルをあらかじめコピーしておいてください。

で、あとはこのパッチを当ててOpenFlashChart2をコンパイルして完了です。できあがったswfを使ってグラフを表示すると、



こんな感じで表示されます。ただ、フォントを埋め込んでいるためファイルサイズが大きくなってしまいますが、その辺は仕方がない？上手い方法があれば是非教えてください。

ちなみにOpenFlashChart2でこのラベルの回転を行うにはrotateプロパティを使用します。データとなるJSONはこんな感じです。

  1. {
  2.   "title":
  3.   {
  4.     "text":"棒グラフ"
  5.   },
  6.   "elements":[
  7.     {
  8.       "type":"bar_filled",
  9.       "colour":"#3373CC",
  10.       "outline-colour":"#3373AC",
  11.       "values":[8,8,1,7,4,8,1,10,7,1,8,5]
  12.     }
  13.   ],
  14.   "x_axis":
  15.   {
  16.     "labels":
  17.     {
  18.       "labels":[
  19.       {
  20.         "text":"北海道札幌市",
  21.         "rotate":"45"
  22.       },
  23.       {
  24.         "text":"青森県青森市",
  25.         "rotate":"45"
  26.       },
  27.       {
  28.         "text":"岩手県盛岡市",
  29.         "rotate":"45"
  30.       },
  31.       {
  32.         "text":"宮城県仙台市",
  33.         "rotate":"45"
  34.       },
  35.       {
  36.         "text":"秋田県秋田市",
  37.         "rotate":"45"
  38.       },
  39.       {
  40.         "text":"山形県山形市",
  41.         "rotate":"45"
  42.       },
  43.       {
  44.         "text":"福島県福島市",
  45.         "rotate":"45"
  46.       },
  47.       {
  48.         "text":"茨城県水戸市",
  49.         "rotate":"45"
  50.       },
  51.       {
  52.         "text":"栃木県宇都宮市",
  53.         "rotate":"45"
  54.       },
  55.       {
  56.         "text":"群馬県前橋市",
  57.         "rotate":"45"
  58.       },
  59.       {
  60.         "text":"埼玉県さいたま市",
  61.         "rotate":"45"
  62.       },
  63.       {
  64.         "text":"千葉県千葉市",
  65.         "rotate":"45"
  66.       }]
  67.     },
  68.     "colour":"#898989",
  69.     "grid-colour":"#EEEEEE"
  70.   },
  71.   "y_axis":
  72.   {
  73.     "colour":"#898989",
  74.     "grid-colour":"#EEEEEE"
  75.   },
  76.   "bg_colour":"#FFFFFF"
  77. }

ということで、日本語が表示できないと困っている方いましたら試してみてください。

コメント

    • 参考にさせていただきました。
      ありがとうございました！

      ただ、かなりswfのサイズが大きくなってしまい（3MB）読み込みが遅く、使い物にならないくらいですね。。。

      何か解決作はないものでしょうかねぇ。。
    • by m | 2010年07月21日 14:57
    • お役に立てて良かったです！

      そうなんですよね、フォントを埋め込むことになるのでファイルサイズが大きくなってしまうのが欠点です。。。

      解決策の一つとしては使用する文字だけ埋め込むようにするという方法があるのですが、ラベルで表示する文字がこれとこれと決まっている場合のみその方法を使うと解決することができます。。。

      もっとスマートな方法があれば良いんですけどね。。
    • by 熊谷裕志 | 2010年07月21日 15:55
    • ご返信ありがとうございますm(_ _)m

      使用する文字だけ埋め込む方法があるのですか！
      常用漢字だけ埋め込めればそこそこ容量抑えられるかも・・・！？

      少し調べてみます！ありがとうございました！
    • by m | 2010年07月29日 12:07
    • 使用する文字だけに限定すると、サイズを結構小さくすることができますので是非試してみてください。

      そのやり方を書きましたので、
      http://blog.asial.co.jp/726
      参考にしていただければと思います。
    • by 熊谷裕志 | 2010年07月29日 18:14
    • すみません、すでにやり方を書いて頂いていたのですね。
      ありがとうございます！！

      さっそく試してみたいと思いますm(_ _)m
    • by m | 2010年07月29日 19:00

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事