16.3.在图表中选择一个区域
16.3.1.问题
我需要在图表上选择某个区域或者某些元素。
16.3.2. 解决方法
首先使用图表的selectionMode 属性设置需要选择的区域类型，然后使用鼠标键盘或者程序来选择图表中的元素。
16.3.3. 讨论
与其他列表组件相似，图表的元素是可选的。这有利于用数据网格或二级图表显示数据点上更多的细节。要使图表可选，就要设定selectionMode 属性为single 或者mulitiple(selectionMode 属性的默认设置是none)。selectionMode 属性设置为none 就代表图表不可选；
single 属性允许一次选择一个元素；multiple 属性允许多个元素同时被选择。
选择图表元素可以通过鼠标键盘，或者通过拖拽一个矩形框来选择多个点，或者使用ActionScript 程序来实现。当选择图表上多个元素时，第一个被选择的元素会被系统认为是定位点，而最后一个被选择的元素会被认为是插入符号。用鼠标选择的方式是非常直观的，点击图表的元素就可以将其选中。要选择多个元素，只要按住Shift 键可以选择连续的元素，按住Ctrl 键(在Mac 系统上是Command 键)可以逐一选择不连续的元素。使用键盘上的左右方向键可以遍历一个图表上的所有数据列。当selectionMode 属性设置为multiple，在图表中用鼠标脱出一个矩形区域可以选择该矩形区覆盖的所以元素。
用程序创建选区稍微负责一点。图表选区的API 提供选择元素和操作所选区域的功能。可以使用以下ChartSeries 对象的属性来获得和设置选区状态：
? selectedItem
? selectedItems
? selectedIndex
? selectedIndices
除了上述的解决办法，还可以使用ChartBase 类的方法来实现：
? getNextItem()
? getPreviousItem()
? getFirstItem()
? getLastItem()
使用图表Change 事件可以监听用户是否使用鼠标或者键盘改变选区，但是对程序改变选区的情况无效。
下面的例子展示的是在图表中选中了某个数据条后，在DataGrid 中就会相应地显示该数据条的数据。在程序中还有上一个和下一个按钮，它们可以实现用程序更换选区。
我需要在图表上选择某个区域或者某些元素。
16.3.2. 解决方法
首先使用图表的selectionMode 属性设置需要选择的区域类型，然后使用鼠标键盘或者程序来选择图表中的元素。
16.3.3. 讨论
与其他列表组件相似，图表的元素是可选的。这有利于用数据网格或二级图表显示数据点上更多的细节。要使图表可选，就要设定selectionMode 属性为single 或者mulitiple(selectionMode 属性的默认设置是none)。selectionMode 属性设置为none 就代表图表不可选；
single 属性允许一次选择一个元素；multiple 属性允许多个元素同时被选择。
选择图表元素可以通过鼠标键盘，或者通过拖拽一个矩形框来选择多个点，或者使用ActionScript 程序来实现。当选择图表上多个元素时，第一个被选择的元素会被系统认为是定位点，而最后一个被选择的元素会被认为是插入符号。用鼠标选择的方式是非常直观的，点击图表的元素就可以将其选中。要选择多个元素，只要按住Shift 键可以选择连续的元素，按住Ctrl 键(在Mac 系统上是Command 键)可以逐一选择不连续的元素。使用键盘上的左右方向键可以遍历一个图表上的所有数据列。当selectionMode 属性设置为multiple，在图表中用鼠标脱出一个矩形区域可以选择该矩形区覆盖的所以元素。
用程序创建选区稍微负责一点。图表选区的API 提供选择元素和操作所选区域的功能。可以使用以下ChartSeries 对象的属性来获得和设置选区状态：
? selectedItem
? selectedItems
? selectedIndex
? selectedIndices
除了上述的解决办法，还可以使用ChartBase 类的方法来实现：
? getNextItem()
? getPreviousItem()
? getFirstItem()
? getLastItem()
使用图表Change 事件可以监听用户是否使用鼠标或者键盘改变选区，但是对程序改变选区的情况无效。
下面的例子展示的是在图表中选中了某个数据条后，在DataGrid 中就会相应地显示该数据条的数据。在程序中还有上一个和下一个按钮，它们可以实现用程序更换选区。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
private function changeSelectedIndex(offset:int):void
{
barSeries.selectedIndex+=offset;
onSelectionChange();
}
private function onSelectionChange():void
{
// programmatic changes to chart selection don't fire a Change event, so we need to manually reset
// the dataProvider of our detail grid when we programatically changethe selection
detailGrid.dataProvider =barChart.selectedChartItems;
}
]]>
</mx:Script>
<!-- use the change event to set the dataProvider of our detail grid to our chart'
s selected items -->
<mx:BarChart id="barChart" dataProvider="{chartDP}"
selectionMode="multiple" change="onSelectionChange()">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:verticalAxis>
<mx:series>
<mx:BarSeries id="barSeries" selectedIndex="0"
yField="day" xField="rainfall"
displayName="day" />
</mx:series>
</mx:BarChart>
<mx:HBox>
<mx:Button click="changeSelectedIndex(1)" label="Previous" />
<mx:Button click="changeSelectedIndex(-1)" label="Next" />
</mx:HBox>
<mx:DataGrid id="detailGrid" >
<mx:columns>
<mx:DataGridColumn dataField="xValue"
headerText="rainfall" />
<mx:DataGridColumn dataField="yValue" headerText="day" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
layout="vertical" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,elevation:540,temperature:55},
{day:'Thursday',rainfall:8,elevation:60,temperature:84},
{day:'Friday',rainfall:11,elevation:390,temperature:52},
{day:'Saturday',rainfall:12,elevation:790,temperature:45},
{day:'Sunday',rainfall:14,elevation:1220,temperature:24}
];
private function changeSelectedIndex(offset:int):void
{
barSeries.selectedIndex+=offset;
onSelectionChange();
}
private function onSelectionChange():void
{
// programmatic changes to chart selection don't fire a Change event, so we need to manually reset
// the dataProvider of our detail grid when we programatically changethe selection
detailGrid.dataProvider =barChart.selectedChartItems;
}
]]>
</mx:Script>
<!-- use the change event to set the dataProvider of our detail grid to our chart'
s selected items -->
<mx:BarChart id="barChart" dataProvider="{chartDP}"
selectionMode="multiple" change="onSelectionChange()">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:verticalAxis>
<mx:series>
<mx:BarSeries id="barSeries" selectedIndex="0"
yField="day" xField="rainfall"
displayName="day" />
</mx:series>
</mx:BarChart>
<mx:HBox>
<mx:Button click="changeSelectedIndex(1)" label="Previous" />
<mx:Button click="changeSelectedIndex(-1)" label="Next" />
</mx:HBox>
<mx:DataGrid id="detailGrid" >
<mx:columns>
<mx:DataGridColumn dataField="xValue"
headerText="rainfall" />
<mx:DataGridColumn dataField="yValue" headerText="day" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
加支付宝好友偷能量挖...
