`
房价会降吗
  • 浏览: 65129 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

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属性的值(在01之间)将垂直分隔线放置在这两个数据点间的任意位置。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' ..>



 

  • 大小: 12.1 KB
  • 大小: 9.5 KB
  • 大小: 9.5 KB
  • 大小: 10.9 KB
  • 大小: 10.5 KB
  • 大小: 10.4 KB
0
0
分享到:
评论

相关推荐

    资料较全的 Flash图表控件 FusionCharts

    内容包括 FusionCharts破解去连接版,FusionCharts 3.1 破解版,FusionCharts配置文件,FusionChartsFree中文开发指南电子书,以及如何消除中文乱码的方法文章。内容很全。

    利用FusionCharts 实现数据图表展示

    - **自定义样式**:FusionCharts允许自定义图表的颜色、字体、边框等样式,以适应品牌风格或提升视觉效果。 - **数据格式化**:原始数据可能需要预处理,如计算百分比、格式化日期等,以便适配FusionCharts的JSON...

    fusioncharts asp.net 图表控件示例

    FusionCharts是一套JavaScript图表解决方案,支持超过90种图表类型,包括线图、柱状图、饼图、地图等,提供丰富的动画效果和自定义选项。它通过XML或JSON数据格式接收数据,并用HTML5/SVG技术呈现图表,兼容各种...

    FusionCharts 非常绚的flash图表

    **FusionCharts:打造绚丽的Flash图表** FusionCharts是一款高度评价的Flash图表库,它以其生动、炫目的视觉效果而备受赞誉。这款工具能够帮助开发者轻松创建出各种复杂的统计图表,适用于各种业务分析和数据可视化...

    FusionChartsFree_FLASH图表控件源代码和使用说明

    FusionCharts Free是一款基于Flash的图表控件,它允许开发者创建出交互式、动画丰富的图表,为数据分析和展示提供了一种生动的方式。这款开源控件适用于那些希望在网页上展示数据,但又需要图表具备高度视觉吸引力的...

    JSP下操作图形控件FusionCharts

    - **图表动画**: 默认情况下,FusionCharts图表带有平滑的过渡动画效果,也可以自定义动画参数。 6. **优化与性能** - **异步加载数据**: 为了避免页面加载时等待数据,可以采用异步方式加载数据源,提高用户体验...

    FusionCharts图表控件中文版使用手册.doc

    《FusionCharts图表控件中文版使用手册》是针对初学者设计的一份详细教程,旨在帮助用户快速掌握这款强大的图表工具。FusionCharts是一款流行的JavaScript图表库,它能够以丰富的互动性和美观的视觉效果呈现数据。 ...

    js实现图表-FusionCharts

    1. **C#**:对于.NET平台,FusionCharts提供了与C#的完美集成,可以通过ASP.NET控件轻松地在网页中添加图表,同时也支持MVC框架。 2. **VB.NET**:VB.NET开发者也可以通过FusionCharts的.NET类库来创建图表,语法...

    非常好用的图标控件FusionCharts

    FusionCharts是一款强大的图表控件,专为开发者设计,用于创建引人入胜、交互式的数据可视化效果。这款工具在IT行业中备受推崇,因为它提供了丰富的图表类型和灵活的定制选项,使得即便是非专业的数据可视化专家也能...

    FusionCharts图表控件ABC入门.ppt

    FusionCharts是一款强大的图表控件,它利用Adobe Flash技术,为用户提供交互式的、数据驱动的动态图表。这个组件特别适合那些希望通过视觉化方式呈现复杂数据的开发者,无论他们使用的是JSP、HTML或其他任何网页脚本...

    fusioncharts图表

    它利用Flash技术提供高质量的图形展示,即使在大数据集上也能保持流畅的用户体验。 FusionCharts支持多种图表类型,包括柱状图、线图、饼图、散点图、热力图等,满足各种数据分析和展示需求。这些图表不仅具有良好...

    Android上,使用FusionCharts进行图表控件封装

    在Android平台上,FusionCharts是一款强大的图表库,用于创建丰富的、交互式的图表和图形。它提供了多种图表类型,如柱状图、饼图、线图、面积图等,以帮助开发者将复杂的数据可视化,增强应用的用户体验。这篇教程...

    FusionCharts图表控件中文版使用手册下载

    FusionCharts是一款强大的图表生成工具,它通过将数据与SWF动画文件相结合,可以在网页上创建交互式的、丰富多彩的图表。以下是对FusionCharts图表控件中文版使用手册中的主要知识点的详细说明: 1. **构成...

    FusionCharts Free(图表flash控件)很好用,有教程和dll

    FusionCharts Free(图表flash控件)很好用,有教程和dll.

    FusionCharts图表控件中文版使用手册整理.pdf

    例如,FusionCharts支持将图表转换为图片或PDF导出,这使得用户可以方便地保存或打印图表,特别是在没有Flash支持的设备上。此外,热点链接功能允许将图表的特定区域关联到网页链接,点击后可跳转至其他页面,增强了...

    FusionCharts 图表控件

    综上所述,FusionCharts图表控件是一个功能强大、灵活易用的数据可视化工具,广泛应用于多个领域,为开发人员提供了便捷的方式来展示和解析复杂数据。无论是初学者还是经验丰富的开发者,都能从中受益。通过学习和...

    fusionCharts是如何在网页呈现图表

    通过这种方式,FusionCharts使得在网页上创建交互式图表变得简单易行,无论是在传统的Flash环境还是现代的HTML5环境中,都能提供一致的用户体验。开发者可以根据项目需求选择不同的图表类型,利用丰富的API和配置...

    FusionCharts很炫的swf图表控件

    FusionCharts是一款强大的图表生成工具,它以SWF(Shockwave Flash)文件格式提供丰富的交互式图表,适用于Web应用程序,帮助开发者轻松创建出美观且功能强大的数据可视化效果。这款控件以其炫酷的设计和易用性赢得...

Global site tag (gtag.js) - Google Analytics