ActionScript でのチャートの作成
ActionScript を使用して、他の Flex コンポーネントと同じようにチャートを作成、破棄、および操作できます。
スクリプトブロックや別の ActionScript クラスファイルにコードを記述するときは、適切なクラスをすべて読み込む必要があります。最も一般的な import ステートメントの例を次に示します。
import mx.collections.*; import mx.charts.*; import mx.charts.series.*; import mx.charts.renderers.*; import mx.charts.events.*;
ActionScript でチャートを作成するには、new キーワードを使用します。MXML での場合と同じようにチャートオブジェクトにプロパティを設定できます。dataProvider プロパティにデータプロバイダを割り当てます。チャートにデータ系列を追加するには、適切なタイプの新しいデータ系列を定義します。チャートに系列を適用するには、チャートの series プロパティを使用します。CategoryAxis クラスを使用して、カテゴリを軸に設定できます。次の例では、系列を 2 つ含む BarChart コントロールを定義します。
<?xml version="1.0"?>
<!-- charts/CreateChartInActionScript.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.BarChart;
import mx.charts.series.BarSeries;
import mx.charts.CategoryAxis;
import mx.charts.Legend;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
public var myChart:BarChart;
public var series1:BarSeries;
public var series2:BarSeries;
public var legend1:Legend;
public function init():void {
// Create the chart object and set some
// basic properties.
myChart = new BarChart();
myChart.showDataTips = true;
myChart.dataProvider = expenses;
// Define the category axis.
var vAxis:CategoryAxis = new CategoryAxis();
vAxis.categoryField = "Month" ;
vAxis.dataProvider = expenses;
myChart.verticalAxis = vAxis;
// Add the series.
var mySeries:Array=new Array();
series1 = new BarSeries();
series1.xField="Profit";
series1.yField="Month";
series1.displayName = "Profit";
mySeries.push(series1);
series2 = new BarSeries();
series2.xField="Expenses";
series2.yField="Month";
series2.displayName = "Expenses";
mySeries.push(series2);
myChart.series = mySeries;
// Create a legend.
legend1 = new Legend();
legend1.dataProvider = myChart;
// Attach chart and legend to the display list.
p1.addChild(myChart);
p1.addChild(legend1);
}
]]></mx:Script>
<mx:Panel id="p1" title="Bar Chart Created in ActionScript"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
この例では、既存の系列の配列を新しい配列で置き換えています。
同様の方法で、既存の配列を置き換える代わりにチャートにデータ系列を追加できます。次の例では、2 つの ColumnSeries を作成し、それらのデータプロバイダを設定します。次に既存のチャート系列を保持する配列を作成し、その配列に新しい系列をプッシュします。最後に、チャートの series プロパティの値がその系列の新しい配列になるように設定します。
<?xml version="1.0"?>
<!-- charts/AddingSeries.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.series.ColumnSeries;
[Bindable]
public var profit04:ArrayCollection = new ArrayCollection([
{Month: "Jan", Profit: 2000},
{Month: "Feb", Profit: 1000},
{Month: "Mar", Profit: 1500}
]);
[Bindable]
public var profit05:ArrayCollection = new ArrayCollection([
{Month: "Jan", Profit: 2200},
{Month: "Feb", Profit: 1200},
{Month: "Mar", Profit: 1700}
]);
[Bindable]
public var profit06:ArrayCollection = new ArrayCollection([
{Month: "Jan", Profit: 2400},
{Month: "Feb", Profit: 1400},
{Month: "Mar", Profit: 1900}
]);
public var series1:ColumnSeries;
public var series2:ColumnSeries;
public function addMoreSeries():void {
if (!series1 || !series2) {
series1 = new ColumnSeries();
series1.dataProvider = profit05;
series1.yField = "Profit";
series1.xField = "Month";
series1.displayName = "2005";
series2 = new ColumnSeries();
series2.dataProvider = profit06;
series2.yField = "Profit";
series2.xField = "Month";
series2.displayName = "2006";
var currentSeries:Array = myChart.series;
currentSeries.push(series1);
currentSeries.push(series2);
myChart.series = currentSeries;
}
}
]]></mx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{profit04}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries dataProvider="{profit04}"
yField="Profit"
xField="Month"
displayName="2004"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
<mx:Button id="b1" label="Add More Series To Chart" click=
"addMoreSeries()"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ActionScript を使用して、可変個の系列をチャートに定義することもできます。次の例は、E4X シンタックスを使用して、データから一意の名前の配列を抽出します。次に、この配列を反復処理して、それぞれの名前用の新しい LineSeries を作成します。
<?xml version="1.0"?>
<!-- charts/VariableSeries.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Script><![CDATA[
import mx.charts.series.LineSeries;
import mx.charts.DateTimeAxis;
[Bindable]
private var myXML:XML =
<dataset>
<item>
<who>Tom</who>
<when>08/22/2006</when>
<hours>5.5</hours>
</item>
<item>
<who>Tom</who>
<when>08/23/2006</when>
<hours>6</hours>
</item>
<item>
<who>Tom</who>
<when>08/24/2006</when>
<hours>4.75</hours>
</item>
<item>
<who>Dick</who>
<when>08/22/2006</when>
<hours>6</hours>
</item>
<item>
<who>Dick</who>
<when>08/23/2006</when>
<hours>8</hours>
</item>
<item>
<who>Dick</who>
<when>08/24/2006</when>
<hours>7.25</hours>
</item>
<item>
<who>Jane</who>
<when>08/22/2006</when>
<hours>6.5</hours>
</item>
<item>
<who>Jane</who>
<when>08/23/2006</when>
<hours>9</hours>
</item>
<item>
<who>Jane</who>
<when>08/24/2006</when>
<hours>3.75</hours>
</item>
</dataset>;
public function initApp():void {
var wholist:Array = new Array();
for each(var property:XML in myXML.item.who) {
// Create an Array of unique names.
if (wholist[property] != property)
wholist[property] = property;
}
// Iterate over names and create a new series
// for each one.
for (var s:String in wholist) {
// Use all items whose name matches s.
var localXML:XMLList = myXML.item.(who==s);
// Create the new series and set its properties.
var localSeries:LineSeries = new LineSeries();
localSeries.dataProvider = localXML;
localSeries.yField = "hours";
localSeries.xField = "when";
// Set values that show up in dataTips and Legend.
localSeries.displayName = s;
// Back up the current series on the chart.
var currentSeries:Array = myChart.series;
// Add the new series to the current Array of series.
currentSeries.push(localSeries);
// Add the new Array of series to the chart.
myChart.series = currentSeries;
}
// Create a DateTimeAxis horizontal axis.
var hAxis:DateTimeAxis = new DateTimeAxis();
hAxis.dataUnits = "days";
// Set this to false to display the leftmost label.
hAxis.alignLabelsToUnits = false;
// Take the date in its current format and create a Date
// object from it.
hAxis.parseFunction = createDate;
myChart.horizontalAxis = hAxis;
}
public function createDate(s:String):Date {
// Reformat the date input to create Date objects
// for the axis.
var a:Array = s.split("/");
// The existing String s is in the format "MM/DD/YYYY".
// To create a Date object, you pass "YYYY,MM,DD",
// where MM is zero-based, to the Date() constructor.
var newDate:Date = new Date(a[2],a[0]-1,a[1]);
return newDate;
}
]]></mx:Script>
<mx:Panel title="Line Chart with Variable Number of Series">
<mx:LineChart id="myChart" showDataTips="true"/>
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート