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

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

用户能够经过不提供任何值到须要隐藏的相应<set>元素来隐藏任意数量的数据块。 code

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

<chart >
    <set label='Jan' value='420' />
    <set label='Feb' value='295' />
    <set label='Mar' value='523' /> 
    <set label='Apr' value='473' /> 
    <set label='May' /> 
    <set label='Jun' /> 
    <set label='Jul' value='354' /> 
    <set label='Aug' value='457' /> 
    <set label='Sep' value='127' /> 
    <set label='Oct' value='354' /> 
    <set label='Nov' value='485' /> 
    <set label='Dec' value='486' /> 
</chart>

 

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



 

能够看到在这张图表中没有5月和6月的列。 class

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

 
im

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

<set/>

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

在上面的折线图中,5月和6月的地方显示的是一个断开。若是用户不想显示5月和6月的这个断开,但愿从4月直接链接到7,那么能够使用新引入的connectNullData属性。 img

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

 
chart

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

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

<chart showValues='0' connectNullData='1'>
      <set label='Jan' value='420' />
      <set label='Feb' value='295' />
      <set label='Mar' value='523' />
      <set label='Apr' value='473' />
      <set label='May' /> 
      <set label='Jun' />
      <set label='Jul' value='354' />
      <set label='Aug' value='457' />
      <set label='Sep' value='127' />
      <set label='Oct' value='354' />
      <set label='Nov' value='485' />
      <set label='Dec' value='486' />
  </chart>

 

或者,若是用户想在链接的时候突出下这个断开,您能够使用虚线特性,以下所示:

<chart showValues='0' connectNullData='1' lineDashGap='6'>
      <set label='Jan' value='420' />
      <set label='Feb' value='295' />
      <set label='Mar' value='523' />
      <set label='Apr' value='473' />
      <set label='May' />
      <set label='Jun' />
      <set label='Jul' value='354' />
      <set label='Aug' value='457' />
      <set label='Sep' value='127' />
      <set label='Oct' value='354' />
      <set label='Nov' value='485' />
      <set label='Dec' value='486' />
  </chart>

将生成如下图表:

相关文章
相关标签/搜索