JS圖表控件FusionCharts使用教程：在圖表標(biāo)繪非連續(xù)數(shù)據(jù)

---

你可能經(jīng)常要以不完整的數(shù)據(jù)點(diǎn)繪制圖表。例如,當(dāng)繪制每月的銷售圖表時(shí),你可能沒(méi)有所有的月數(shù)據(jù)。所以,你可能只想以一個(gè)空白的區(qū)域來(lái)顯示缺失的數(shù)據(jù)，不在這個(gè)區(qū)域中繪制任何東西。FusionCharts可以讓這個(gè)目標(biāo)很容易的實(shí)現(xiàn)。

》》》免費(fèi)下載Flash圖表控件FusionCharts最新版

用戶可以通過(guò)不提供任何值到需要隱藏的相應(yīng)<set>元素來(lái)隱藏任意數(shù)量的數(shù)據(jù)塊。

具體操作參考下面的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>

在這里,我們沒(méi)有5月和6月的數(shù)據(jù)。所以,我們不提供任何相應(yīng)的數(shù)據(jù)值。如下圖所示:

可以看到在這張圖表中沒(méi)有5月和6月的列。

如果對(duì)一個(gè)折線圖運(yùn)行相同的數(shù)據(jù),用戶將看到以下輸出效果:

折線圖在5月和6月的位置處是一個(gè)斷開(kāi),因?yàn)闆](méi)有對(duì)同一個(gè)區(qū)域賦值。如果用戶連缺失數(shù)據(jù)的數(shù)據(jù)標(biāo)簽都沒(méi)有，可以編寫(xiě)缺失數(shù)據(jù)的空集元素如下:

<set/>

如何在圖表中連接空集數(shù)據(jù)

在上面的折線圖中,在5月和6月的地方顯示的是一個(gè)斷開(kāi)。如果用戶不想顯示5月和6月的這個(gè)斷開(kāi),希望從4月直接連接到7月,那么可以使用新引入的connectNullData屬性。

你只需要設(shè)置<chart ... connectNullData='1' ..> ，圖表將如下所示:

這個(gè)屬性對(duì)所有的線和面積圖都是有效的。

圖表的完整XML數(shù)據(jù)再次重現(xiàn):

<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>

或者,如果用戶想在連接的時(shí)候突出下這個(gè)斷開(kāi),您可以使用虛線特性，可將上訴代碼

<chart showValues='0' connectNullData='1'>

改為

<chart  showValues='0'  connectNullData='1'  lineDashGap='6'>

即可。

將生成以下圖表：