ドゥアイネットのプログラマー、湯川が開発日記を綴ります。

CALENDAR
S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< December 2019 >>
ARCHIVES
CATEGORIES
<< 細かい説明 | main | うるう年の判定 >>
残り時間表示
 残り時間表示をプログレスバーでなく
時計のように円で表してみました。

最初は円を描画したりして作成しようかと思いましたが、
Flexにある円グラフを使いました。

円グラフを表示するときに、表示する時間と
アニメーションを指定できます。

これを使って作成しました。
画像

以下ソースです。

MXML
<mx:PieChart x="-129" y="336" id="myChart"  rotation="270" width="130">
  <mx:series>
    <mx:PieSeries field="Amount" nameField="Expense" color="#00B8DF" >
      <mx:showDataEffect>
        <mx:SeriesSlide duration="30000" />30秒かけて円グラフを表示
      </mx:showDataEffect> 
      <mx:fills>
        <mx:SolidColor color="#00B8DF"/>円の色指定
      </mx:fills>
      <mx:filters>ドロップシャドウ表示なし
        <mx:Array/>
      </mx:filters>
    </mx:PieSeries>
  </mx:series>     
</mx:PieChart>

Action Script
//いったん初期化して
_doc.myChart.dataProvider = null;

//dataProviderを再設定、これでアニメーションされます
//項目は一つにして単色にしています。
var expenses:ArrayCollection = new ArrayCollection([
      {Expense:"Taxes", Amount:30}
   ]);
   
_doc.myChart.dataProvider = null;
_doc.myChart.dataProvider = expenses;

あとはテキスト・イメージを重ねて見た目を調整しました。
| Flex | 11:58 | comments(0) | - |
コメント
コメントする