flex chart hide a datatip

We get data from multiple feeds and data may or may not exist for a certain date. So, for points that have no data we send NaN.

Question: In the below code , is there a way to not show datatip for those that are null. I have added a datatip function but it does show a small empty square, is it possible to not even show that?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
    import mx.charts.HitData;
     import mx.collections.ArrayCollection;

     [Bindable]
      public var DS:ArrayCollection = new ArrayCollection([
        {date:"22-Aug-05", expense:1575.9, tax:41.87, price: 4},
        {date:"23-Aug-05", expense:NaN, tax:NaN,price: 4},
        {date:"24-Aug-05", expense:1507.1, tax:42.77,price:5 },
        {date:"25-Aug-05", expense:1568.8 ,tax:48.06, price:5},
     ]);

     public function dtFunc(hd:HitData):String {
        if(""+hd.item.expense == "NaN")
            return "";
        else 
            return hd.item.expense ;
     }



  ]]></mx:Script>

    <mx:SolidColor id="sc1" color="blue" alpha=".8"/>
    <mx:Stroke id="s1" color="blue" weight="1"/>


  <mx:Panel title="Column Chart With Multiple Axes">
     <mx:CartesianChart id="myChart" showDataTips="true" dataTipFunction="dtFunc">
        <mx:horizontalAxis>
           <mx:CategoryAxis id="h1" categoryField="date"/>
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer placement="bottom" axis="{h1}"/>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxisRenderers>
            <mx:AxisRenderer placement="left" axis="{v1}"/>
            <mx:AxisRenderer placement="left" axis="{v3}" visible="false"/>
        </mx:verticalAxisRenderers>

        <mx:series>
           <mx:ColumnSeries id="cs1" 
                horizontalAxis="{h1}" 
                dataProvider="{DS}" 
                yField="expense" 
                displayName="EXPENSE-BARCHART"
                filterData="false"
            >
                <mx:verticalAxis>
                   <mx:LinearAxis id="v1" />
                </mx:verticalAxis>           
           </mx:ColumnSeries>           


           <mx:LineSeries id="cs3" horizontalAxis="{h1}" dataProvider="{DS}" yField="price" 
            displayName="Price" form="step"
            >
                <mx:verticalAxis>
                    <mx:LinearAxis id="v3"   />           
                </mx:verticalAxis>

           </mx:LineSeries>
        </mx:series>
     </mx:CartesianChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

My guess is that you would have to extend the classes for DataTip, to check for NULL hitData objects, to kill/stop the drawing of the display.

I do not think there is a way to do that normally in FLEX. You would have to customize and override the hitData class unfortunately. What a pain!!

Thank you Devtron, the http://www.flexdeveloper.eu/forums/flex-charting/disable-datatip-but-keep-mouse-event-on-line-chart/

correctly describes the solution.

You can also set myChart.setStyle("dataTipRenderer",mx.skins.ProgrammaticSkin); to get rid of the display of datatips.

Two minor issues,

We need to know the value of the tip before clearing the graphics.
The line that connects the datapoint to the rectangle that displays the data could not be removed. But that is good enough for me.

来源：https://stackoverflow.com/questions/3873258/flex-chart-hide-a-datatip

标签

apache-flex

datatipfunction