彩票走势图

JS图表控件FusionCharts使用教程:自定义图表上的垂直线

原创|使用教程|编辑:郝浩|2013-08-21 11:59:46.000|阅读 1316 次

概述:垂直(或条形图中的水平)分隔线是用来帮助用户分隔数据块的。本此教程将全面详细的讲解垂直线的用法。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

什么是垂直分割线

FusionCharts中的垂直(或条形图中的水平)分隔线是用来帮助用户分隔数据块的。可以被放置在任何两个数据点,即使是不规则的间隔也可以。

什么是垂直分割线-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>

输出结果如下图所示:

如何设置垂直分隔线的位置-Flash图表控件FusionCharts使用教程

在数据相同的情况下设置linePosition属性值为1,输出结果如下:

如何设置垂直分隔线的位置-Flash图表控件FusionCharts使用教程

为垂直线添加标签

用户可以通过设置<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>

输出结果为

为垂直线添加标签-Flash图表控件FusionCharts使用教程

设置垂直线标签的位置

标签被设置为显示在画布顶端(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>

设置垂直线标签的位置-Flash图表控件FusionCharts使用教程

删除垂直线标签的边框

用户可以通过在图表级别进行设置删除垂直线标签边界:

<chart showVLineLabelBorder='0' ..>

或者是通过在单个垂直线级别进行设置删除垂直线标签边界:

<vLine showLabelBorder='0' ..>

删除垂直线标签的边框-Flash图表控件FusionCharts使用教程

》》》免费下载FusionCharts最新版


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP