JS圖表控件FusionCharts使用教程：自定義圖表上的垂直線

---

什么是垂直分割線

FusionCharts中的垂直(或條形圖中的水平)分隔線是用來幫助用戶分隔數(shù)據(jù)塊的。可以被放置在任何兩個數(shù)據(jù)點,即使是不規(guī)則的間隔也可以。

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>元素應(yīng)用到圖表中用戶想要放置的位置進行使用。

如何設(shè)置垂直分隔線的位置

默認情況下,在圖表中添加垂直分隔線,會出現(xiàn)在兩個數(shù)據(jù)點之間。但是,用戶可以通過設(shè)置linePosition屬性的值（在0和1之間）將垂直分隔線放置在這兩個數(shù)據(jù)點間的任意位置。0代表上一個數(shù)據(jù)，1代表下一個數(shù)據(jù)。

示例：

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

輸出結(jié)果如下圖所示：

在數(shù)據(jù)相同的情況下設(shè)置linePosition屬性值為1，輸出結(jié)果如下：

為垂直線添加標(biāo)簽

用戶可以通過設(shè)置<vLine label='Your text' ..>為垂直線添加一個標(biāo)簽。

示例如下：

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

輸出結(jié)果為

設(shè)置垂直線標(biāo)簽的位置

標(biāo)簽被設(shè)置為顯示在畫布頂端(labelPosition = ' 0 ')或在底部(labelPosition = ' 1 ')或兩者之間的任何位置。在畫布底部顯示標(biāo)簽,需要使用下面的代碼:

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

刪除垂直線標(biāo)簽的邊框

用戶可以通過在圖表級別進行設(shè)置刪除垂直線標(biāo)簽邊界：

<chart showVLineLabelBorder='0' ..>

或者是通過在單個垂直線級別進行設(shè)置刪除垂直線標(biāo)簽邊界：

<vLine showLabelBorder='0' ..>

》》》免費下載FusionCharts最新版