flex4 lineChart与DataGrid交互显示特定点-CSDN博客

本文介绍了一种在Flex应用中实现特定数据点高亮的方法。当用户点击DataGrid中的某一行时，对应的LineChart上的数据点会被高亮显示，并展示其DataToolTip。此功能通过编程方式实现，适用于需要突出显示特定数据的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex图表（lineChart，AreaChart等等），当鼠标移到线上某个数据点时，，dataToolTip会显示数据点的相关参数。这是通过鼠标移至数据点来触发的。

现在有种情况，我现在已经从lineChart数据源里取得最大值和最小值，通过DataGrid显示出来，现在我想通过点击一列，其相对应的点就会在lineChart线上显示出来，包括他的DataToolTip，这称之为显示特定的数据点。

界面有lineChart+DataGrid：

<fx:Script>
    public function show(event:ListEvent):void{
            var testVO:TestVO = (DataGrid)(event.target).selectedItem as TestVO;
            //allSeries是图表中线条的集合
        var allSeries:Array = linechart.series;
           //由于只有一条线条，所以数组长度为1，这里得到线条的series
            var series:Series = allSeries[0] as Series;
           //这里将series的dataTip集合清空
        series.dataTipItems = [];

            for(var i:int = 0;i<array.length;i++){
                    var item:ChartItem = series.items[i];
                    //图表中一个item唯一对应的就是数据源里的一个对象
             var LCI:LineSeriesItem= item as LineSeriesItem;
	   if(testVo.date == LCI.xValue ){
                       //符合要求就加到series的dataTipItems集合里面，以便最后显示
                  series.dataTipItems.push(item);
	            linechart.showAllDataTips = true;
	}
        }
}


</fx:Script>

<mx:LineChart   id="linechart" dataProvider="{array}"  showDataTips="true">
     <mx:LineSeries  id="series1"   yField="sales"  xField="date"/>
</mx:LineChart>

<mx:DataGrid  itemClick="show(event)>
        。。。。。。
</mx:DataGrid>

这样点击DataGrid，通过itemClick触发事件，lineChart组件上线条中相应的点即会显示其DataToolTip。