• Flash图表控件FusionCharts如何在图表标绘非连续数据


    你可能经常要以不完整的数据点绘制图表。例如,当绘制每月的销售图表时,你可能没有所有的月数据。所以,你可能只想以一个空白的区域来显示缺失的数据,不在这个区域中绘制任何东西。FusionCharts可以让这个目标很容易的实现。

    用户可以通过不提供任何值到需要隐藏的相应<set>元素来隐藏任意数量的数据块。

    具体操作参考下面的XML代码:

    1. <chart >  
    2.     <set label='Jan' value='420' />  
    3.     <set label='Feb' value='295' />  
    4.     <set label='Mar' value='523' />   
    5.     <set label='Apr' value='473' />   
    6.     <set label='May' />   
    7.     <set label='Jun' />   
    8.     <set label='Jul' value='354' />   
    9.     <set label='Aug' value='457' />   
    10.     <set label='Sep' value='127' />   
    11.     <set label='Oct' value='354' />   
    12.     <set label='Nov' value='485' />   
    13.     <set label='Dec' value='486' />   
    14. </chart>  

    在这里,我们没有5月和6月的数据。所以,我们不提供任何相应的数据值。如下图所示:


    可以看到在这张图表中没有5月和6月的列。

    如果对一个折线图运行相同的数据,用户将看到以下输出效果:

    折线图在5月和6月的位置处是一个断开,因为没有对同一个区域赋值。如果用户连缺失数据的数据标签都没有,可以编写缺失数据的空集元素如下:

     

    1. <set/>  

    如何在图表中连接空集数据

     

    在上面的折线图中,在5月和6月的地方显示的是一个断开。如果用户不想显示5月和6月的这个断开,希望从4月直接连接到7月,那么可以使用新引入的connectNullData属性。

    你只需要设置<chart ... connectNullData='1' ..> ,图表将如下所示:

     

    这个属性对所有的线和面积图都是有效的。

    图表的完整XML数据再次重现:

     

    1. <chart showValues='0' connectNullData='1'>  
    2.       <set label='Jan' value='420' />  
    3.       <set label='Feb' value='295' />  
    4.       <set label='Mar' value='523' />  
    5.       <set label='Apr' value='473' />  
    6.       <set label='May' />   
    7.       <set label='Jun' />  
    8.       <set label='Jul' value='354' />  
    9.       <set label='Aug' value='457' />  
    10.       <set label='Sep' value='127' />  
    11.       <set label='Oct' value='354' />  
    12.       <set label='Nov' value='485' />  
    13.       <set label='Dec' value='486' />  
    14.   </chart>  

     

    或者,如果用户想在连接的时候突出下这个断开,您可以使用虚线特性,如下所示:

    1. <chart showValues='0' connectNullData='1' lineDashGap='6'>  
    2.       <set label='Jan' value='420' />  
    3.       <set label='Feb' value='295' />  
    4.       <set label='Mar' value='523' />  
    5.       <set label='Apr' value='473' />  
    6.       <set label='May' />  
    7.       <set label='Jun' />  
    8.       <set label='Jul' value='354' />  
    9.       <set label='Aug' value='457' />  
    10.       <set label='Sep' value='127' />  
    11.       <set label='Oct' value='354' />  
    12.       <set label='Nov' value='485' />  
    13.       <set label='Dec' value='486' />  
    14.   </chart>  


    将生成以下图表:

  • 相关阅读:
    大数据处理系列之(二)系统过载保护
    大数据处理系列之(一)Java线程池使用
    js实现递归菜单无限层
    treeTable实现排序
    spring-dm 一个简单的实例
    Equinox OSGi服务器应用程序的配置步骤 (支持JSP页面)
    Spring DM 2.0 环境配置 解决Log4j问题
    Spring.DM web开发环境搭建
    STL容器的排序
    排序例子
  • 原文地址:https://www.cnblogs.com/shenqi/p/3269432.html
Copyright © 2020-2023  润新知