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