我试图找到一个非丑陋的解决方案，但仍然没有运气。 我希望当鼠标指针位于图表的任何一点上时，不仅当指针直接位于数据点上时，还会出现数据提示。
答案 0 :(得分：0)
可能不是您要找的答案，但我们发现Axiis Visualization Framework更容易定制，并且添加/修改我们认为合适的任何和所有功能。
http://www.axiis.org/
答案 1 :(得分：0)
我也在我的项目中尝试这个未来。仍在努力。下面的代码为您提供了解决问题的方法。
<fx:Declarations>
<mx:SeriesInterpolate id="interp" elementOffset="10"
duration="200" minimumElementDuration="10" />
<mx:SolidColorStroke id="st" color="#92D050" weight="8" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.charts.ChartItem;
import mx.charts.chartClasses.Series;
import mx.charts.series.items.LineSeriesItem;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
private var dummyGeneratorTimer:Timer;
private var dummyUpdateTimer:Timer;
private static const DATA_INTERVAL:int = 600;//8;
private static const ARRAY_SIZE:int = 500;
private var chartIndex:int = 0;
[Bindable]
private var chartData:ArrayCollection = new ArrayCollection( [
{ Time: 1, parameter1: 2200, parameter2: 1700, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 },
{ Time: 2, parameter1: 1900, parameter2: 1600, parameter3: 1450, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 3, parameter1: 1900, parameter2: 1700, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 },
{ Time: 4, parameter1: 1900, parameter2: 1600, parameter3: 1450, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 5, parameter1: 1900, parameter2: 1750, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 },
{ Time: 5, parameter1: 1900, parameter2: 1600, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 7, parameter1: 1900, parameter2: 1700, parameter3: 1500, parameter4: 1300, parameter5: 1000, parameter6:900 },
{ Time: 8, parameter1: 1900, parameter2: 1600, parameter3: 1600, parameter4: 1200, parameter5: 1100, parameter6:800 },
{ Time: 9, parameter1: 1900, parameter2: 1800, parameter3: 1400, parameter4: 1300, parameter5: 1000, parameter6:900 },
{ Time: 10, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 11, parameter1: 1900, parameter2: 1700, parameter3: 1400, parameter4: 1300, parameter5: 1100, parameter6:900 },
{ Time: 12, parameter1: 1900, parameter2: 1600, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 13, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 },
{ Time: 14, parameter1: 1900, parameter2: 1700, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 15, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 },
{ Time: 16, parameter1: 1900, parameter2: 1700, parameter3: 1400, parameter4: 1200, parameter5: 1000, parameter6:800 },
{ Time: 17, parameter1: 1900, parameter2: 1600, parameter3: 1500, parameter4: 1300, parameter5: 1100, parameter6:900 }]);
protected function application1_initializeHandler(event:FlexEvent):void
{
dummyGeneratorTimer = new Timer(DATA_INTERVAL); // 8 millisecond
}
private var count:Number = 17;
private function populateData(event:TimerEvent):void
{
var obj:Object = new Object();
obj.Time= (++count).toString();
obj.parameter1= randomRange(1900,1900);
obj.parameter2= randomRange(1600,1700);
obj.parameter3= randomRange(1400,1500);
obj.parameter4= randomRange(1200,1300);
obj.parameter5= randomRange(1000,1100);
obj.parameter6= randomRange(800,900);
chartData.refresh();
chartData.addItem(obj);
linechart.width += 10;
}
private function randomRange(minNum:Number, maxNum:Number):Number
{
return (Math.round(Math.random() * (maxNum - minNum + 1)) + minNum);
}
protected function scope_clickHandler(event:MouseEvent):void
{
if(scopeBtn.label == 'Scope1'){
scopeBtn.label = 'Stop Scope';
dummyGeneratorTimer.addEventListener(TimerEvent.TIMER, populateData,false,0,true);
dummyGeneratorTimer.start();
}
else{
scopeBtn.label = 'Scope1';
dummyGeneratorTimer.stop();
dummyGeneratorTimer.removeEventListener(TimerEvent.TIMER, populateData,false);
}
}
private var activeSeries:LineSeries;
private var activePoint:LineSeriesItem;
/* protected function linechart_itemMouseMoveHandler(event:ChartItemEvent):void
{
// TODO Auto-generated method stub
if(event.hitData && event.hitData.element is LineSeries){
activeSeries = event.hitData.element as LineSeries;
activePoint = (event.hitData.chartItem as LineSeriesItem);
var tmpArr:Array = activeSeries.dataTransform.invertTransform(linechart.mouseX, linechart.mouseY);
for(var i:int=0;i<tmpArr.length;i++){
trace("i:"+tmpArr[i]);
}
}
}*/
private function dataTipHandler(event:MouseEvent):void {
var leftPoint:Point = new Point(linechart.mouseX,0);
//leftPoint = event.target.localToGlobal(leftPoint);
//leftPoint = linechart.localToContent(leftPoint);
//var rightPoint:Point = new Point(chart.mouseX,0);
var leftArr:Array = lineSeries.localToData(leftPoint);
var series:Series;
var item:ChartItem;
for each(var s:Series in linechart.series){
// initialize/empty dataTipItems of all series.
s.dataTipItems = [];
series = s;
item = series.items[leftArr[0]-3];
if(item != null)
series.dataTipItems.push(item);
}
linechart.showAllDataTips = true;
}
]]>
</fx:Script>
<s:Button id="scopeBtn" label="Scope1" click="scope_clickHandler(event)"/>
<!--<s:Button id="update" label="update" click="update_clickHandler()"/>-->
＆LT; /秒：布局＆GT; - ＆GT;
<s:layout>
<s:HorizontalLayout horizontalAlign="right"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<!--<s:HSlider change="drawData()" liveDragging="true" value="50" id="quadBoundary" minimum="-200" maximum="200" width="100%" /> -->
<mx:LineChart id="linechart" color="0xffffff" height="100%" width="100%" cacheAsBitmap="true" cachePolicy="on"
showDataTips="true" dataProvider="{chartData}" fontFamily="Arial" fontSize="20" seriesFilters="[]"
gutterLeft="40" gutterTop="0" paddingTop="0"
dataTipRenderer="MyDataTip" mouseMove="dataTipHandler(event)">
<!-- mouseSensitivity="20" dataTipMode="multiple" showAllDataTips="false" itemMouseDown="linechart_itemMouseMoveHandler(event)" -->
<mx:backgroundElements>
<mx:GridLines id="gridLines" gridDirection="vertical" cacheAsBitmap="true" cachePolicy="on"
verticalTickAligned="true"> <!--verticalChangeCount="1"-->
<mx:verticalStroke>
<s:SolidColorStroke color="0xffffff"
weight="0"
alpha="0.5" />
</mx:verticalStroke>
<!-- <mx:horizontalStroke>
Set alpha to 0 so stroke isn't visible.
<mx:SolidColorStroke color="0x000000"
weight="0"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="0x000000"
alpha="0.1" />
</mx:horizontalFill>-->
</mx:GridLines>
<!--<dataShapes:DataDrawingCanvas id="canvas" includeInRanges="true"/>
- ＆GT; - ＆GT;
<mx:horizontalAxis>
<!--<mx:LinearAxis id="h1" autoAdjust="true"/>-->
<mx:CategoryAxis id="h1" categoryField="Time"/>
<!--<mx:DateTimeAxis id="h1" autoAdjust="true" displayLocalTime="true" interval="11" />-->
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="v1" baseAtZero="false" autoAdjust="false" alignLabelsToInterval="false"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="right" axis="{v1}" showLine="true" showLabels="true" visible="true"/>
</mx:verticalAxisRenderers>
<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{h1}" minorTickPlacement="none" minorTickLength="3"
canDropLabels="false">
<mx:minorTickStroke>
<s:SolidColorStroke color="#BBCCDD" weight="2"/>
</mx:minorTickStroke>
</mx:AxisRenderer>
<!--
<charts:ScrollableAxisRenderer axis="{h1}" id="scrollAxis" tickPlacement="none" placement="bottom"
labelGap="3" scrollBarThemeColor="blue" />
-->
</mx:horizontalAxisRenderers>
<mx:series>
<!-- <mx:LineSeries yField="parameter1" showDataEffect="{interp}" form="step" sortOnXField="false" displayName="Parameter1"
verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on"
itemRenderer="mx.charts.renderers.CircleItemRenderer" radius="5">
<mx:lineStroke>
<s:SolidColorStroke color="#C05046" weight="3" alpha="0.9" />
</mx:lineStroke>
</mx:LineSeries>-->
<components:MyLineSeries id="lineSeries" xField="Time" yField="parameter1" displayName="parameter1" form="segment" showDataEffect="{interp}"
verticalAxis="{v1}" horizontalAxis="{h1}" cacheAsBitmap="true" cachePolicy="on"
lineStroke="{st}" itemRenderer="mx.charts.renderers.ShadowBoxItemRenderer">
<components:lineSegmentRenderer>
<fx:Component>
<dashedLine:DashedLineRenderer pattern="[20,20,5,20]"/>
</fx:Component>
</components:lineSegmentRenderer>
</components:MyLineSeries>
<mx:LineSeries xField="Time" yField="parameter2" showDataEffect="{interp}" form="curve" displayName="Parameter2" verticalAxis="{v1}" horizontalAxis="{h1}"
cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.CircleItemRenderer">
<mx:lineStroke>
<s:SolidColorStroke color="#036CBA" weight="3" alpha="0.9" />
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries xField="Time" yField="parameter3" showDataEffect="{interp}" form="step" displayName="Parameter3" verticalAxis="{v1}" horizontalAxis="{h1}"
cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.CrossItemRenderer">
<mx:lineStroke>
<s:SolidColorStroke color="#9DBB61" weight="3" alpha="0.9" />
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries xField="Time" yField="parameter4" showDataEffect="{interp}" form="curve" displayName="Parameter4" verticalAxis="{v1}" horizontalAxis="{h1}"
cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.DiamondItemRenderer" radius="5">
<mx:lineStroke>
<s:SolidColorStroke color="#4BACC6" weight="3" alpha="0.9" />
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries xField="Time" yField="parameter5" showDataEffect="{interp}" form="curve" displayName="Parameter5" verticalAxis="{v1}" horizontalAxis="{h1}"
cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.TriangleItemRenderer">
<mx:lineStroke>
<s:SolidColorStroke color="#ED9853" weight="3" alpha="0.9" />
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries xField="Time" yField="parameter6" showDataEffect="{interp}" form="curve" displayName="Parameter6" verticalAxis="{v1}" horizontalAxis="{h1}"
cacheAsBitmap="true" cachePolicy="on" itemRenderer="mx.charts.renderers.BoxItemRenderer"
legendMarkerRenderer="mx.charts.renderers.TriangleItemRenderer">
<mx:lineStroke>
<s:SolidColorStroke color="#7030A0" weight="3" alpha="0.9" />
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
<mx:annotationElements>
<local:RangeSelector id="rs"/>
</mx:annotationElements>
</mx:LineChart>
<mx:Legend dataProvider="{linechart}" color="0xffffff"/>
</s:SkinnableContainer>