アピラクンのFlashどしろーとがS2Flexに挑戦記

 | 

1900-06-01

[]コンポーネント概観:チャート編 00:24

チャートです。グラフです。やはりこういうコンポーネントが標準で付いているのはいいですね。試しに棒グラフを作ってみました。サンプルソースはこちら。(1行目が空なのは?xml...ってやつがなぜか出ないためなので気にしないでください)

1 : 
2 : <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
3 :
4 :   <mx:Model id="score" source="score.xml"/>  
5 :   
6 :   <mx:ColumnChart dataProvider="{score.student}">
7 : 
8 :     <mx:horizontalAxis>
9 :       <mx:CategoryAxis dataProvider="{score.student}" categoryField="name"/>
10:     </mx:horizontalAxis>
11: 
12:     <mx:series>
13: 	  <mx:Array>
14:         <mx:ColumnSeries yField="kokugo"/>
15:         <mx:ColumnSeries yField="sansuu"/>
16:         <mx:ColumnSeries yField="rika"/>
17:         <mx:ColumnSeries yField="syakai"/>
18:       </mx:Array>
19:     </mx:series>
20: 	
21:   </mx:ColumnChart>
22: </mx:Application>

ちょっと長くなっちゃいました。棒フラグのコンポーネントは6行目のColumnChartです。ここから追っかけていきましょ。属性にdataProviderというのがありますが、これが棒グラフに表示するデータになります。様々なコンポーネントで、このdataProviderという属性で透過的にデータを与えられるようです。データの実体はいろいろなものが使えるみたいですが、今回はxmlをデータとして与えています。ここで注意!値の「{」「}」重要。初心者の私は、これを入れなかったがためにうまくいかず、ちょっとはまりました。Builderでも構文チェックに引っかからないので注意しましょ。

dataProviderの値は、{score.student}です。はじめのscoreの部分は、4行目のModelと対応しています。Modelのsource属性にxmlを指定していますが、このxmlがデータの実体です。こう書いておけば自動でデータを取ってきてくれます。便利ー。私が作ったデータはこんな感じです。

[score.xml]


<score>

    <student name="ichiro">
        <kokugo>90</kokugo>
        <sansuu>75</sansuu>
        <rika>100</rika>
        <syakai>80</syakai>
    </student>

    <student name="jiro">
        <kokugo>60</kokugo>
        <sansuu>50</sansuu>
        <rika>90</rika>
        <syakai>100</syakai>
    </student>

    <student name="goro">
        <kokugo>60</kokugo>
        <sansuu>50</sansuu>
        <rika>40</rika>
        <syakai>30</syakai>
    </student>

</score>

先生になった気分で学生のテストの得点を管理するものです。score,studentときて、項目がkokugo,とかローマ字なのがしょぼい(^^ゞ

このxmlがModelの実データになるわけです。で、6行目に戻って、studentがxml内の<student>と対応するわけです。

8-10行目は軸の見出しに何を表示するかを指定しています。名前を出してます。

12-19行目はデータの定義です。XXXChartのチャートに対して、XXXSeriesがチャートの値、というコンポーネントの対応になるようです。これで、1人に対して棒が4本(国語,算数,理科,社会の棒)が伸びていて、そのセットが3人分(ichiro,jiro,goro)表示される棒グラフになります(グラフの絵が無いとわかりにくいですね・・・)

他のグラフも大体同様に作成出来ます。まとめると、

  • データモデルを定義する
  • チャートを定義し、データモデルとのバインディングを指定する
  • チャートの見出し項目をモデルから指定する。
  • チャートのデータ項目をモデルから指定する。

こんな感じでしょうか。ではグラフの種類いきます。

AreaChart
エリアチャートです。値を塗り分けたグラフです。絵が無いとわかりにくいなー。
BarChart
横棒グラフです。
BubbleChart
バブルチャート。3つの変数の相関を散布図にして表示でき、第3の変数はバブルの直径で表示出来る・・・はず。
ColumnChart
縦棒グラフ。
LineChart
折れ線グラフ。
PieChart
円グラフ。
PlotChart
散布図。
Legend
グラフの凡例だけ抜き出して表示するもののようです。詳しい使い方はそのうち調べます・・・。

次はチャートに対するデータ表示用のコンポーネント

AreaSeries
AreaChartに対応するデータ表示コンポーネント。
BarSeries
BarChartに対応するデータ表示コンポーネント。
BubbleSeries
BubbleChartに対応するデータ表示コンポーネント。
ColumnSeries
ColumnChartに対応するデータ表示コンポーネント。
LineSeries
LineChartに対応するデータ表示コンポーネント。
PieSeries
PieChartに対応するデータ表示コンポーネント。
PlotSeries
PlotChartに対応するデータ表示コンポーネント。

次は軸関係!もうへろへろなので、マニュアルを見ながら・・・。

AxisRenderer
軸の属性をいろいろ変更するもののようです。これも詳しい使い方はそのうち・・・
CategoryAxisr
データをカテゴリ毎に軸にマッピングさせる時に使います。
LinearAxis
数値データを軸にマッピングさせます。

以下の3つはわかりませんでした。マニュアルにも載ってないです。グラフになんかしらのエフェクトを追加するもののようです。

SeriesInterpolate
保留
SeriesSlide
保留
SeriesZoom
保留

いじょ!

JheneferJhenefer 2013/11/22 01:09 I'm so glad I found my soultion online.

LanaLana 2013/11/22 06:51 At last! Something clear I can <a href="http://vxizwj.com">unetnsdard.</a> Thanks!

YareeYaree 2013/11/23 13:36 That kind of thikinng shows you're on top of your game http://bofiylb.com [url=http://bhyzvytviho.com]bhyzvytviho[/url] [link=http://kzemokka.com]kzemokka[/link]

TetrisTetris 2013/11/25 08:48 This artclie is a home run, pure and simple! http://kuijhnsek.com [url=http://slivxmny.com]slivxmny[/url] [link=http://ngilmlcq.com]ngilmlcq[/link]

ゲスト



トラックバック - http://seasarproject.g.hatena.ne.jp/apira/19000601
 | 
1900 | 01 | 02 | 03 | 04 | 05 | 06 |
2004 | 10 |