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

---

什么是垂直分割線

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

》》》免費下載FusionCharts最新版