Flash圖表控件FusionCharts如何自定義圖表上的垂直線

什麼是垂直分割線

垂直（或條形圖中的水平)分隔線是用來幫助用戶分隔數據塊的。能夠被放置在任何兩個數據點,即便是不規則的間隔也能夠。

XML代碼以下：

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' 
       numberPrefix='$' showValues='0'>
     <set label='Oct' value='420000' />
     <set label='Nov' value='910000' />
     <set label='Dec' value='680000' />
     <vLine/>
     <set label='Jan' value='720000' />
     <set label='Feb' value='810000' />
     <set label='Mar' value='510000' />
</chart>

從上面的XML能夠看到,一個垂直分隔線將經過<set>元素中的<vLine>元素應用到圖表中用戶想要放置的位置進行使用。

如何設置垂直分隔線的位置

默認狀況下,在圖表中添加垂直分隔線,會出如今兩個數據點之間。可是,用戶能夠經過設置linePosition屬性的值（在0和1之間）將垂直分隔線放置在這兩個數據點間的任意位置。0表明上一個數據，1表明下一個數據。

示例：

<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue'
       numberPrefix='$' showValues='0'>
    <set label='Oct' value='420000' />
    <set label='Nov' value='910000' />
    <set label='Dec' value='680000' />
    <vLine linePosition='0'/>
    <set label='Jan' value='720000' />
    <set label='Feb' value='810000' />
    <set label='Mar' value='510000' />
</chart>

輸出結果以下圖所示：

在數據相同的狀況下設置linePosition屬性值爲1，輸出結果以下：

爲垂直線添加標籤

用戶能夠經過設置<vLine label='Your text' ..>爲垂直線添加一個標籤。

示例以下：

<chart caption='Monthly Revenue' xAxisName='Month'  yAxisName='Revenue'
       numberPrefix='$' showValues='0'>
    <set label='Oct' value='420000' />
    <set label='Nov' value='910000' />
    <set label='Dec' value='680000' />
    <vLine label='2009'/>
    <set label='Jan' value='720000' />
    <set label='Feb' value='810000' />
    <set label='Mar' value='510000' />
</chart>

輸出結果爲

 

設置垂直線標籤的位置

標籤被設置爲顯示在畫布頂端(labelPosition = ' 0 ')或在底部(labelPosition = ' 1 ')或二者之間的任何位置。在畫布底部顯示標籤,須要使用下面的代碼:

<chart caption='Monthly Revenue' xAxisName='Month'  yAxisName='Revenue'
       numberPrefix='$' showValues='0'>
    <set label='Oct' value='420000' />
    <set label='Nov' value='910000' />
    <set label='Dec' value='680000' />
    <vLine label='2009' labelPosition='1'/>
    <set label='Jan' value='720000' />
    <set label='Feb' value='810000' />
    <set label='Mar' value='510000' />
</chart>

 

 

刪除垂直線標籤的邊框

用戶能夠經過在圖表級別進行設置刪除垂直線標籤邊界

<chart showVLineLabelBorder='0' ..>

或者是經過在單個垂直線級別進行設置刪除垂直線標籤邊界：

<vLine showLabelBorder='0' ..>