`
Fonkie
  • 浏览: 67801 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

ColumnChart数据源只有一个数据时出现“无法访问空对象引用的属性或方法”解决方法

阅读更多
NPE in AxisRenderer when stacked column chart has one data item

错误信息:
I have been unable to create a simple test-case that reproduces this error, but I think a code inspection shows a problem. I've also been unable to get any help with a workaround on the Adobe forums or flexcoders.
The error is a null pointer exception when a stacked column chart has a single data item.

In AxisRenderer.as (line 2200 in sdk3.3) we find a reference to "lastLabel" which will be null if there is only one label, because it is computed as _labels[1].


Excerpt from AxisRenderer.calcStaggeredSpacing:



        lastLabel = _labels[1];



        if (adjustable.left == false)
        {
            staggeredScale = Math.min(
                staggeredScale,
                staggeredleftGutter / (firstLabel.width / 2));
        }



        if (adjustable.right == false)
        {
            staggeredScale = Math.min(
                staggeredScale,
                staggeredrightGutter / (lastLabel.width / 2)); // (me) Here's where the NPE occurs.
        }



Stack Crawl:

__________



TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at mx.charts::AxisRenderer/calcStaggeredSpacing()[C:\work\flex\dmv_automation\proj ects\datavisualisation\src\mx\charts\AxisRenderer.as:2200]
    at mx.charts::AxisRenderer/calcRotationAndSpacing()[C:\work\flex\dmv_automation\pr ojects\datavisualisation\src\mx\charts\AxisRenderer.as:1591]
    at mx.charts::AxisRenderer/adjustGutters()[C:\work\flex\dmv_automation\projects\da tavisualisation\src\mx\charts\AxisRenderer.as:1331]
    at mx.charts::AxisRenderer/set gutters()[C:\work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\ AxisRenderer.as:803]
    at mx.charts.chartClasses::CartesianChart/updateAxisLayout()[C:\work\flex\dmv_auto mation\projects\datavisualisation\src\mx\charts\chartClasses\CartesianChart.as:2 032]
    at mx.charts.chartClasses::CartesianChart/updateDisplayList()[C:\work\flex\dmv_aut omation\projects\datavisualisation\src\mx\charts\chartClasses\CartesianChart.as: 1359]
    at mx.core::UIComponent/validateDisplayList()[C:\autobuild\3.3.0\frameworks\projec ts\framework\src\mx\core\UIComponent.as:6351]
    at mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\3.3.0\frameworks\ projects\framework\src\mx\managers\LayoutManager.as:622]
    at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.3.0\framework s\projects\framework\src\mx\managers\LayoutManager.as:695]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.3.0\frameworks\proje cts\framework\src\mx\core\UIComponent.as:8633]
    at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.3.0\frameworks\projec ts\framework\src\mx\core\UIComponent.as:8573]



Context from AxisRenderer:

(Note: the second branch of the if statement is executing, thus adjustment.bottom is false which leads to the code path with the bug.)



public function set gutters(value:Rectangle):void
    {
        var correctedGutters:Rectangle = value;
      
        // This check will rarely succeed, because _gutters
        // have been tweaked to represent placement.
        if (_gutters &&
            _gutters.left == correctedGutters.left &&
            _gutters.right == correctedGutters.right &&
            _gutters.top == correctedGutters.top &&
            _gutters.bottom == correctedGutters.bottom)
        {
            _gutters = correctedGutters;
            return;
        }
        else
        {
            adjustGutters(value,
                { left: false, top: false, right: false, bottom: false });
        }
    }





I am building the series list dynamically, it's a stacked column chart, and for me the bug occurs when there is one series and one data point.

I haven't been able to trigger the bug with the following example, which has a similar structure to my actual code.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">




<mx:Script>
    <![CDATA[
        import mx.charts.series.ColumnSeries;
        import mx.charts.chartClasses.Series;



        [Bindable]
        public var seriesList:Array = [];
      
        public function buildSeriesList(seriesList:Array):Array {
  
            var chartSeries:Array = new Array();
          
            var index:int = 0;
            for each (var series:Object in seriesList) {
              
                        var columnSeries:ColumnSeries = new ColumnSeries();
                        columnSeries.dataProvider = series.items;
                        columnSeries.dataFunction = myDataFunction;
                        columnSeries.displayName = series.category;
                        chartSeries.push( columnSeries );
            }
            return chartSeries;
        }



            private function categoryProvider(seriesList:Array):Array {
                if (seriesList && seriesList.length > 0)
                    return (seriesList[0]).items;
                return null;
            }
      
            private function myDataFunction(series:Series, item:Object, fieldName:String):Object {
                if(fieldName == "yValue") {
                    return item.value;
                }
                else if(fieldName == "xValue") {
                    return item.category;
                }
                else
                    return null;
              }



                 public function shortCategoryLabel(source:String):String {
                   
                    return source;
                 }



                 public function longCategoryLabel(source:String):String {
                   
                    return source;
                 }
            
              private function onRefresh(event:Event):void {
                    this.seriesList = [ { category: "cat1" , items: [ { category: "Default Business Unit", value:574.1 }] }];
              }
      
    ]]>
</mx:Script>



    <mx:Button label="Refresh" click="onRefresh(event)" />
  
    <mx:ColumnChart height="100%"
            width="100%" type="stacked" series="{this.buildSeriesList(this.seriesList)}">
  
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="bottomAxis2" title="Horizontal Axis"
                        dataProvider="{this.categoryProvider(this.seriesList)}"
                        categoryField="category"
                        />
                </mx:horizontalAxis>
   
                 <mx:verticalAxis>
                    <mx:LinearAxis id="leftAxis2" title="Vertical Axis"/>
                </mx:verticalAxis>



             <mx:verticalAxisRenderers>
                <mx:AxisRenderer
                    placement="left" styleName="verticalAxisRenderer"
                    axis="{leftAxis2}" verticalAxisTitleAlignment="vertical"
                    />
            </mx:verticalAxisRenderers>



                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer
                        placement="bottom"
                        axis="{bottomAxis2}" verticalAxisTitleAlignment="flippedVertical"
                        >
                    </mx:AxisRenderer>
                </mx:horizontalAxisRenderers>
              
    </mx:ColumnChart>



  
</mx:Application>


解决方法:
In case someone still has this problem, here a quick fix.
Add an creationComplete event to your AxisRenderer:

<mx:AxisRenderer id="horizontalAR"
            creationComplete="handleHAxisRendererCreationComplete(event)"
                 axis="{myHAxis}" />

<Script>
private function handleHAxisRendererCreationComplete(event:FlexEvent):void
{
    var axisRenderer:AxisRenderer = event.target as AxisRenderer;
    axisRenderer.setStyle('canStagger', (axisRenderer.numChildren == 1) ? false : true);
}
</Script>

原文地址:https://bugs.adobe.com/jira/browse/FLEXDMV-2275
分享到:
评论

相关推荐

    Flex ColumnChart获取得焦点改变颜色

    在示例代码中,我们首先定义了一个`ArrayCollection`对象`arrColl`,用作`ColumnChart`的数据提供者。`arrColl`中包含了多个`Object`类型的数据项,每个数据项都具有`name`、`obp`、`slg`和`avg`等属性。其中`name`...

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    你可以通过设置slices的数据源来定制图形,每个slice对应数据集中的一个项,其角度和颜色可以由数据值决定。 **柱形图(Column Chart)** 柱形图是一种用矩形的高度或长度来表示数据量或比例的图表,常用于比较不同...

    Flex ColumnChart 样式设置

    Flex ColumnChart 样式设置,详细设置。

    flex柱状图动态切换数据源实例

    该flex应用程序演示了柱状图动态切换数据源 &lt;mx:ColumnChart x="6" y="65" id="columnchart1" showDataTips="true" dataProvider="{list}" height="390" itemClick="onItemClick(event)"&gt; 苹果" yField...

    设置 ColumnChart 列间隔

    在Flex开发中,ColumnChart是一种常用的图表类型,用于展示数据的柱状图。在实际应用中,我们可能需要调整柱状图中各个列之间的间隔,以优化视觉效果和信息的可读性。本文将深入探讨如何设置ColumnChart的列间隔,并...

    Flex漂亮的柱状图(ColumnChart)

    3. **创建柱状系列**:柱状图通常由一个或多个柱状系列组成,每个系列代表数据集的一个维度。在Flex中,你可以通过`&lt;s:Series&gt;`标签来创建。 ```mxml ``` 4. **自定义样式**:Flex允许你改变柱状图的颜色、宽度...

    columnChart和DataGrid交换数据

    针对flex新手熟悉flash builde控件

    extjs中的报表【ColumnChart、PieChar、LineChar的用法】

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,特别是在企业级应用中,它的报表功能尤为关键。本文将深入探讨ExtJS中的ColumnChart(柱状图)、PieChart(饼图)和LineChar(折线图)这三种...

    Eclipse开发Flex新手必学例子(后台数据页面显示N种图表)

    在Eclipse中开发Flex时,需要先安装Adobe Flex Builder插件,然后创建一个新的Flex项目。接着,可以使用MXML或者ActionScript来定义UI组件和数据源,例如使用mx:HTTPService或mx:WebService来连接Java后端或数据库...

    WebChart 几个简单的例子 有源码

    这里创建了一个包含日期和其他数值列的数据表,`Random rnd`用于生成随机数值,这在实际开发中可能会替换为从数据库或其他数据源获取数据的逻辑。 总结起来,WebChart是一个方便的库,可以轻松地在ASP.NET Web应用...

    flex图表展示数据源码

    Flex是一种基于Adobe Flash Player或Adobe AIR运行时的开源框架,用于构建富互联网应用程序(RIA)。在Flex中,我们可以使用各种图表组件来展示数据,这些图表能够以视觉化的方式帮助用户理解复杂的统计数据。"flex...

    3D ColumnChart

    flex4 3D ColumnChart

    flex的labelRotation解决方法

    在这个例子中,我们首先定义了一个名为`myMyriad`的自定义字体家族,其源字体文件为`MyriadWebPro.ttf`。然后,我们将其应用到`ColumnChart`组件上,同时设置了字体大小为20。这样,当`labelRotation`属性被使用时,...

    vue+echarts完整显示x轴的示例以及完整案例.zip

    在`columnChart.vue`中,我们可以看到一个完整的Vue组件,它展示了如何配置ECharts来解决X轴显示不全的问题。这个组件包含了ECharts的初始化、数据加载以及相关配置项的设置。例如,可能有以下关键代码: ```...

    flex 柱状图表

    4. 动态更新:实时数据显示是Flex图表的一个强大特性,可以在运行时动态添加、删除或修改数据,图表会即时响应。 5. 视觉效果:Flex提供多种视觉效果,如动画、阴影、3D效果等,可以提升图表的视觉吸引力。 五、...

    VISIFIRE控件使用

    - 在`LineChart`方法中,实例化一个`LineChart`对象,设置标题,并创建一个`DataSeries`,指定其渲染方式为折线图(`RenderAs.Line`),并开启标签显示(`LabelEnabled = true`)。 - 对于`ColumnChart`,类似的步骤...

    How to use Flex to achieve Thematic Layers of Columnar

    在地图组件中,当需要在特定位置显示柱状图时,可以创建一个graphic,并将其symbol设置为通过ColumnChartFactory创建的ColumnChart实例。这样,地图上的每个graphic都会显示一个柱状图,根据数据提供者的值来决定...

    ComponentArt.Web.Visualization.Charting.2009.1.2002 Source (2009年5月6日版本)

    ComponentArt.Web.Visualization.Charting.2009.1.2002 是一个源自2009年的高级图表库,专为.NET开发人员设计,用于在ASP.NET和Silverlight应用程序中创建丰富的数据可视化效果。这个源代码包包含了2009年5月6日发布...

    Flex 饼状、柱状、实时曲线图

    动态更新数据时,需要处理数据源的添加、删除或修改操作。 四、学习资源与实践 提供的"PiclColumnLineDemo"示例可能包含了创建这些图表的完整代码,这为初学者提供了宝贵的实践机会。通过阅读和理解代码,你可以...

Global site tag (gtag.js) - Google Analytics