마우스가 데이터 포인트를 가리킬 때뿐만 아니라 마우스를 끌 때 데이터 팁 표시

Question

추악한 솔루션을 찾으려고했지만 운이 없다. 포인터가 데이터 포인트 바로 위에있을 때뿐만 아니라 마우스 포인터가 차트의 임의 지점에있을 때 데이터 팁을 표시하려고합니다.

Answer 1

아마 당신이 찾고있는 대답은 아니지만 Axis 시각화 프레임 워크를 사용하면 훨씬 쉽게 사용자 정의하고 추가/수정 할 수있는 기능을 발견했습니다.
http://www.axiis.org/

Answer 2

저는 앞으로도이 프로젝트를 진행하려고합니다. 아직도 노력하고있어. 아래 코드는 문제에 대한 해결책을 제공합니다.

<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()"/>--> 

</s의

: 레이아웃> ->

<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"/> 

-> ->

 <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>