如何创建一个方法来计算和设置图表的间隔

我正在学习flex。我需要你的帮助，我想创建一个方法来计算垂直轴的间隔值，这取决于“dataProvider”的值。如何创建一个方法来计算和设置图表的间隔

<mx:verticalAxis> 
     <mx:LinearAxis labelFunction="usageColumnSerieLabelFn" interval="0.0001"/> 
    </mx:verticalAxis>

就像你看到的，在那段代码中，我对代码段进行了硬编码。就像我说的，我想要你的帮助，以创建一个计算和设置这个值的新方法。我相信，如果我们在“dataProvider”中取较大的值，然后将该值（较大的值+ 0.1）设置为间隔。会做的伎俩。但是我不知道如何设置mx以外的属性：LinearAxis组件。

我做了这个例子，如果你有时间，请给我一个手。

问候

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

    import mx.formatters.SwitchSymbolFormatter; 
    import mx.charts.series.items.LineSeriesItem; 
    import mx.charts.HitData; 
    import mx.formatters.NumberFormatter; 
    import mx.core.UIComponent; 
    import mx.effects.easing.Bounce; 
    import mx.managers.PopUpManager; 

    private var decimalFormatter:NumberFormatter = new NumberFormatter(); 

    [Bindable] 
    public var expenses:ArrayCollection = new ArrayCollection([ 
     {hour:"00", Expenses:0.0}, 
     {hour:"01", Expenses:0.0}, 
     {hour:"02", Expenses:0.0}, 
     {hour:"03", Expenses:0.0}, 
     {hour:"04", Expenses:0.0}, 
     {hour:"05", Expenses:0.0}, 
     {hour:"06", Expenses:0.0}, 
     {hour:"07", Expenses:0.0}, 
     {hour:"08", Expenses:0.0}, 
     {hour:"09", Expenses:0.0}, 
     {hour:"10", Expenses:0.00009}, 
     {hour:"11", Expenses:0.00009}, 
     {hour:"12", Expenses:0.0}, 
     {hour:"13", Expenses:0.0}, 
     {hour:"14", Expenses:0.0}, 
     {hour:"15", Expenses:0.0}, 
     {hour:"16", Expenses:0.0}, 
     {hour:"17", Expenses:0.0}, 
     {hour:"18", Expenses:0.0}, 
     {hour:"19", Expenses:0.0}, 
     {hour:"20", Expenses:0.0}, 
     {hour:"21", Expenses:0.0}, 
     {hour:"22", Expenses:0.0}, 
     {hour:"23", Expenses:0.00009} 
    ]); 

    private function customDataTipFunc(item:HitData):String{ 

     decimalFormatter.precision = 4; 
     var dataTip:String = ""; 

     dataTip += "<B>kWh</B>\n"; 
     dataTip += item.item.hour + "\n"; 

     if (item.item.Expenses == 0) { 
      dataTip += decimalFormatter.format(item.item.Expenses).toString() + " kWh"; 
     } else { 
      if(item.item.Expenses < 0.0001) { 
       dataTip += "&lt;0.0001 kWh";  
      } else { 
       dataTip += decimalFormatter.format(item.item.Expenses).toString() + " kWh"; 
      } 
     } 

     return dataTip; 
    } 

    public function axisLabelFn(cat:Object,pcat:Object,ax:LinearAxis):String{ 
       var nf1:NumberFormatter = new NumberFormatter(); 
       nf1.useThousandsSeparator = true; 
       nf1.precision = 4; 

       var tempNumber:Number = Number(cat.toString()); 
       var out:String = "" 

       if (tempNumber == 0) { 
        out = nf1.format(cat) + " kWh"; 
       }else { 
        if (tempNumber < 0.0001) { 
         out = "&lt;" + nf1.format(cat) + " kWh";  
        } else { 
         out = nf1.format(cat) + " kWh"; 
        } 
       } 

       //return nf1.format(cat) + " kWh"; 
       return out; 
    } 

    ]]></mx:Script> 
    <mx:Panel title="Column Chart Kwh" width="1200"> 
    <mx:ColumnChart id="myChart" showDataTips="true" height="100%" width="100%" dataProvider="{expenses}" minHeight="150" dataTipFunction="customDataTipFunc"> 
     <mx:horizontalAxis> 
      <mx:CategoryAxis 
       dataProvider="{expenses}" 
       categoryField="hour" 
      /> 
     </mx:horizontalAxis> 
     <mx:verticalAxis> 
      <mx:LinearAxis labelFunction="axisLabelFn" interval="0.0001"/> 
     </mx:verticalAxis> 
     <mx:series> 
      <mx:ColumnSeries 
       xField="hour" 
       yField="Expenses" 
       displayName="Kwh" 
      /> 
     </mx:series> 
    </mx:ColumnChart> 
    <mx:Legend dataProvider="{myChart}"/> 
    </mx:Panel> 
</mx:Application>

来源

2013-12-09 Juano7894

如果您不希望在线性轴之外完成此操作，那么扩展linearaxis并将其设置在那里，使用此自定义组件代替线性轴？ – Zeus

嗯..我想这样做，线性轴以外。在不同的功能。我正在读“关于延长linearaxis”。但我不知道该怎么做。谢谢你的回复，但如果你能给我一个例子，将会很棒！谢谢！ – Juano7894

感谢宙斯为你的话。我尝试了一些东西，这是最终的“解决方案”。

<?xml version="1.0"?> 
<!-- charts/BasicColumn.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="calculateInterval()"> 
    <mx:Script><![CDATA[ 
    import mx.collections.ArrayCollection; 
    import flash.external.ExternalInterface; 
    import mx.charts.HitData; 

    import mx.formatters.SwitchSymbolFormatter; 
    import mx.charts.series.items.LineSeriesItem; 
    import mx.charts.HitData; 
    import mx.formatters.NumberFormatter; 
    import mx.core.UIComponent; 
    import mx.effects.easing.Bounce; 
    import mx.managers.PopUpManager; 

    private var decimalFormatter:NumberFormatter = new NumberFormatter(); 


    [Bindable] 
    public var expenses:ArrayCollection = new ArrayCollection([ 
     {hour:"00", Expenses:0.0}, 
     {hour:"01", Expenses:0.0}, 
     {hour:"02", Expenses:0.0}, 
     {hour:"03", Expenses:0.0}, 
     {hour:"04", Expenses:0.0}, 
     {hour:"05", Expenses:0.0}, 
     {hour:"06", Expenses:0.0}, 
     {hour:"07", Expenses:0.0}, 
     {hour:"08", Expenses:0.0}, 
     {hour:"09", Expenses:0.0}, 
     {hour:"10", Expenses:0.00009}, 
     {hour:"11", Expenses:0.00009}, 
     {hour:"12", Expenses:0.0}, 
     {hour:"13", Expenses:0.0}, 
     {hour:"14", Expenses:0.0}, 
     {hour:"15", Expenses:0.0}, 
     {hour:"16", Expenses:0.0}, 
     {hour:"17", Expenses:0.0}, 
     {hour:"18", Expenses:0.0}, 
     {hour:"19", Expenses:0.0}, 
     {hour:"20", Expenses:0.0}, 
     {hour:"21", Expenses:0.0}, 
     {hour:"22", Expenses:0.0}, 
     {hour:"23", Expenses:0.00009} 
    ]); 


    public function calculateInterval():void{ 
     var maxValue:Number = 0; 
     for (var x:int = 0; x < expenses.length; ++x) {    
      if (maxValue < expenses.getItemAt(x).Expenses){ 
       maxValue = expenses.getItemAt(x).Expenses; 
      } 
     } 
     MyLinearAxis.interval = maxValue + 0.0001; 

    } 

    private function customDataTipFunc(item:HitData):String{ 

     decimalFormatter.precision = 4; 
     var dataTip:String = ""; 

     dataTip += "<B>kWh</B>\n"; 
     dataTip += item.item.hour + "\n"; 

     if (item.item.Expenses == 0) { 
      dataTip += decimalFormatter.format(item.item.Expenses).toString() + " kWh"; 
     } else { 
      if(item.item.Expenses < 0.0001) { 
       dataTip += "&lt;0.0001 kWh";  
      } else { 
       dataTip += decimalFormatter.format(item.item.Expenses).toString() + " kWh"; 
      } 
     } 

     return dataTip; 
    } 

    public function axisLabelFn(cat:Object,pcat:Object,ax:LinearAxis):String{ 

       var nf1:NumberFormatter = new NumberFormatter(); 
       nf1.useThousandsSeparator = true; 
       nf1.precision = 4; 

       var tempNumber:Number = Number(cat.toString()); 
       var out:String = "" 

       if (tempNumber == 0) { 
        out = nf1.format(cat) + " kWh"; 
       }else { 
        if (tempNumber < 0.0001) { 
         out = "&lt;" + nf1.format(cat) + " kWh";  
        } else { 
         out = nf1.format(cat) + " kWh"; 
        } 
       } 

       return out; 
    } 

    ]]></mx:Script> 
    <mx:Panel title="Column Chart Kwh" width="1200"> 
    <mx:ColumnChart id="myChart" showDataTips="true" height="100%" width="100%" dataProvider="{expenses}" minHeight="150" dataTipFunction="customDataTipFunc"> 
     <mx:horizontalAxis> 
      <mx:CategoryAxis 
       dataProvider="{expenses}" 
       categoryField="hour" 
      /> 
     </mx:horizontalAxis> 
     <mx:verticalAxis> 
      <mx:LinearAxis id="MyLinearAxis" labelFunction="axisLabelFn" /> 
     </mx:verticalAxis> 
     <mx:series> 
      <mx:ColumnSeries 
       xField="hour" 
       yField="Expenses" 
       displayName="Kwh" 
      /> 
     </mx:series> 
    </mx:ColumnChart> 
    <mx:Legend dataProvider="{myChart}"/> 
    </mx:Panel> 
</mx:Application>

就像你看到的，我调用函数“calculateInterval（）”用的MX调用方法“creationComplete”的应用。在这种方法中，我正在计算间隔并将偏移量设置为数据提供者中的最大值。

我也设置了一个id给linearAxis，用这个ID我设置了间隔。

如果您认为一个更好的方法，请让我知道。

问候。

来源

2013-12-10 16:13:56 Juano7894

如何创建一个方法来计算和设置图表的间隔

回答

相关问题