当前位置: 代码迷 >> Web前端 >> 点击 datagrid 行选择性的展示 lineChart 的 DataTips
  详细解决方案

点击 datagrid 行选择性的展示 lineChart 的 DataTips

热度:639   发布时间:2012-11-17 11:14:15.0
点击 datagrid 行选择性的显示 lineChart 的 DataTips
private function showTip(evt:ListEvent):void{
                                //清空tip
				for each(var s:Series in linechart2.series){
					s.dataTipItems = [];
				}
				//当前选中的行索引
				var selidx:Number=evt.currentTarget.selectedIndex
		
                                //添加选中行的数据到tips
				for each(var s:Series in linechart2.series){

					var chartitem:ChartItem=s.items[selidx];
		
					s.dataTipItems.push(chartitem);

				}
				//现实tips
				linechart2.showAllDataTips = true;

			}



<mx:DataGrid id="dg" width="100%" height="100" dataProvider="{dp}" itemClick="showTip(event)">
				<mx:columns>
					<mx:DataGridColumn headerText="hostName" dataField="hostName"/>
					<mx:DataGridColumn headerText="time" dataField="time"/>
					<mx:DataGridColumn headerText="max" dataField="max"/>
					<mx:DataGridColumn headerText="min" dataField="min"/>
					<mx:DataGridColumn headerText="average" dataField="average"/>
				</mx:columns>
			</mx:DataGrid>


<mx:LineChart id="linechart2" color="0x323232" height="100%" width="100%"  showDataTips="true" dataProvider="{dp}">
						
						<mx:verticalAxis>
							<mx:LinearAxis baseAtZero="false" title="value" minimum="0"/>
						</mx:verticalAxis>
						
						<mx:horizontalAxis>
							<mx:CategoryAxis categoryField="time" title="time"/>
						</mx:horizontalAxis>
							
						<mx:series>
							<mx:LineSeries xField="time" yField="max" form="curve" displayName="max" />
							<mx:LineSeries xField="time" yField="min" form="curve" displayName="min"/>
							<mx:LineSeries xField="time" yField="average" form="curve" displayName="average" />
						</mx:series>
					</mx:LineChart>
  相关解决方案