`
war_martin
  • 浏览: 115008 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

FusionChartsFree xml 属性中文API

 
阅读更多

从本节起,我们详细介绍每种图表的详细参数和使用方法,我们从2D柱状图说起。 
一个柱状图对象的内容包含很多方面,下面给出一个列表。 
图表 
数据 
其他 
图表对象 
功能属性 
标题和轴名称 
图表修饰 
分区线/网格 
工具提示 
填充和边距 
<set> 元素 
绘图修饰 
数字格式 
文字属性 
垂直线 
趋势线 

我们先从图表对象说起。什么是图表对象?我们还是得先看数据文件,如下 

1 <chart palette='2' caption='月度销售额' xAxisName='月度' yAxisName='单位(台)' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='0' baseFont='宋体' baseFontSize='12'> 
2 <set label='一月' value='462' /> 
3 <set label='二月' value='857' /> 
4 <set label='三月' value='671' alpha='20' /> 
5 <set label='四月' value='494' /> 
6 <set label='五月' value='761' /> 
7 <set label='六月' value='960' /> 

9 </chart> 
10 


这里 caption xAxisName 等都是图表对象,来表示我们chart的一个属性,即“标题”“X轴名称”等,在fusioncharts中,系统定义了很多的图标对象,每种展示类型(柱状图、饼图等)的图表对象有些是通用的有些是非通用。这些对象不需要我们都记忆,但是在需要的时候能知道去什么地方查找就可以,以我看来,fusioncharts已经做得非常完备,基本上你能想到的地方它都可以实现。 

对象名 
描述 
功能支持 
动画参数支持 
BACKGROUND 
BACKGROUND 是指图表的整个背景 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
· _xScale 
· _yScale 
CANVAS 
在2D图表中, CANVAS是指实际图表绘制区域.它是一个有界矩形。在3D图表中,它指的是在三维基础上建立的列。 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
· _xScale 
· _yScale 
CAPTION 
CAPTION 指图表的标题. 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
DATALABELS 
DATALABELS 指的是X轴的数据标签. 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
DATAPLOT 
DATAPLOT 指的是图表的实际描绘。例如,在2D柱状图中,列被称为DataPlot. 在饼图中是饼,在气泡图中是气泡等。 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
· _xScale 
· _yScale 
DATAVALUES 
DATAVALUES 指的是描绘的值如每个数据(折线、列、条、饼等),这是数据图旁边显示的值。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
DIVLINES 
DIVLINES 是画布上的水平或垂直线。每一个分区线把轴分为较小的单位帮助用户理解图表。 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _y 
· _yScale 
HGRID 
HGRID 是指两个连续的横向分区线替代颜色带。 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _y 
· _xScale 
· _yScale 
SUBCAPTION 
SUBCAPTION指的是图表子标题。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
TOOLTIP 
TOOLTIP指的是当鼠标悬停在数据图上的提示信息。 
· Font 

TRENDLINES 
TRENDLINES 指的是跨越图表画布的水平、垂直线。它可以对一些预先确定的价值提供帮助。 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _y 
· _xScale 
· _yScale 
TRENDVALUES 
TRENDVALUES 指趋势线(如果显示任何值)。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
VLINES 
VLINES 是垂直分割线帮助你分割数据块。这些线贯穿图表的上下,从而分成不同的数据块。在条形图中,他们是图表水平贯穿水平线。 
· Animation 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
· _yScale 
VLINELABELS 
VLINELABELS 指任何已创建的垂直线分隔标签。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
XAXISNAME 
XAXISNAME 指的是X轴图表的标题。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
YAXISNAME 
YAXISNAME指的是Y轴图表的标题。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
YAXISVALUES 
YAXISVALUES 指的是有限值或分割线值,这是沿Y轴图表显示。 
· Animation 
· Font 
· Shadow 
· Glow 
· Bevel 
· Blur 
· _alpha 
· _x 
· _y 
· _rotation 

查看了上述的对象概念后,我们来看看激动人心的功能属性,这些是我们在后续工作中会经常打交道的内容,大家应该对这部分重点了解。 
    <chart> 元素属性 
  
转自:http://www.cnblogs.com/tippoint/archive/2010/08/25/1807796.html 
功能属性 
这些属性可以控制图表上的各种功能元素。例如,你可以选择显示/隐藏数据标签,数据值,y轴值。你还可以设置图表的限制和扩展属性。 


属性名 
类型 
范围 
描述 
animation 
布尔 
0/1 
此属性可让您选择来控制你的图表动画。如果你不希望任何图表的动画部分,设置为0。 
palette 
数值 
1-5 
FusionCharts v3 介绍了调色板的概念。每个图表有5预先定义的调色板,你可以选择。每个调色板中的图表呈现不同的颜色主题。有效值为1-5。 
paletteColors 
字符串 
由逗号分隔的16进制颜色代码 
虽然调色板属性允许选择一个调色板主题适用于图表的背景,画布,字体和工具提示,它不改变数据项(即,列,行,饼图等)的颜色。使用paletteColors属性,您可以指定您为十六进制的颜色自定义数据项列表。颜色的名单必须由逗号如<分开。图表将循环通过指定的颜色列表,然后提供相应的数据图。 
要为整个Web应用程序所有的图表设置相同的颜色,你可以保存在应用程序中使用的调色板的颜色列表,然后在全球每个图表中提供相同的XML。 
showAboutMenuItem 
布尔 
0/1 
设置为1显示图表中的自定义上下文菜单,可定制以显示您的文字,可以链接到您的网址。例如,您可以设置图表的上下文菜单,包括“关于您的公司名称”,然后链接到你的公司主页。默认情况下,点击该图表显示“关于FusionCharts”。 
aboutMenuItemLabel 
字符串 

为上下文菜单项设置的自定义标签。 
aboutMenuItemLink 
字符串 
URL 
自定义上下文菜单项的链接。使用FusionCharts的链接格式链接才能打开新的窗口一样,弹出窗口,框架或JavaScript链接。 
showLabels 
布尔 
0/1 
它设置是否在X轴标签将被显示或不配置。 
labelDisplay 
字符串 
WRAP, STAGGER, ROTATE or NONE 
使用此属性,您可以控制将出现在图表上您的数据标签(X轴标签)。有4个选项: WRAP, STAGGER, ROTATE or NONE. WRAP 如果它的长度超过所分配的面积包装标签的文字. ROTATE 旋转在垂直或倾斜位置标签. STAGGER 分成多行的标签. 
rotateLabels 
布尔 
0/1 
此属性允许您设置数据标签是否会显示为旋转图表上的标签. 
slantLabels 
布尔 
0/1 
如果您选择了显示旋转的图表标签,这个属性允许您设置的配置标签是否会显示为倾斜标签或完全垂直的。 
labelStep 
数值 
1或以上 
默认情况下,所有标签都显示在图表上.如果你有一系列数据(如月份、日期、星期名称),你可以为了清晰隐藏每个n-th标签。这个标签只是允许你这么做。它可以跳过n个x轴标签。 
staggerLines 
数值 
2 或以上 
如果您选择STAGGER作为标签显示模式,使用这个属性可以控制错开多少线。默认情况下,所有标签都显示在一行。 
showValues 
布尔 
0/1 
设置数据值是否会沿着图表数据描绘显示。 
rotateValues 
布尔 
0/1 
如果您选择了显示数据值,你可以旋转它们使用此属性。 
placeValuesInside 
布尔 
0/1 
如果您选择了显示数据值,可以在列中使用这属性显示。默认情况下,显示的值在数据列的外部。 
showYAxisValues 
布尔 
0/1 
FusionCharts 的Y轴被分割线分为不同的部分。每个分割线显示此部分的值。使用此属性你可以是否显示这些分割线的值。 
showLimits 
布尔 
0/1 
是否显示图表的限值。 showYAxisValues是v3单独的新属性。 
showDivLineValues 
布尔 
0/1 
是否显示分区线的值。 showYAxisValues是v3单独的新属性。 
yAxisValuesStep 
数值 
1或以上 
默认情况下,所有分区线显示它们的值。但是,您可以选择跳过每x(次)分区线使用这个属性值 
showShadow 
布尔 
0/1 
是否显示列的阴影。 
adjustDiv 
布尔 
0/1 
FusionCharts自动根据所提供的数据尝试调整分区线和限值。不过,如果你想设置分割线的明确的下限值和上限值,首先设置此属性为false。这将禁用分区线自动调整。 
rotateYAxisName 
布尔 
0/1 
如果你不想旋转Y轴的名称,设置为0。特别在你为Y轴名称指定字符集如UTF8时,在旋转模式不要旋转Y轴名称。 
yAxisNameWidth 
数字 
(像素值) 
如果您选择不旋转的y轴的名称,你可以选择一个最大宽度将适用于y轴的名称。 
clickURL 
字符串 

整个图表现在可以作为一个热点。使用本URL定义为图表热点链接。该链接为FusionCharts的链接格式。 
defaultAnimation 
布尔 
0/1 
默认情况下,图表的一些元素使用动画.如果你想替换默认的动画模式,你可以设置此属性为0。它在你通过使用样式功能定义自己的动画模式时特别有用。 
yAxisMinValue 
数字 

此属性可以帮助您显式设置图表的下限。如果你不指定这个值,它是由FusionCharts自动计算你所提供的数据为基础的。 
yAxisMaxValue 
数字 

此属性可以帮助您显式设置图表的上限。如果你不指定这个值,它是由FusionCharts自动计算你所提供的数据为基础的。 
setAdaptiveYMin 
布尔 
0/1 
此属性可让您设定是否y轴的下限会是0(在图表上有明确值的情况下),还是应该提供数值为基础在y轴下限适应不同的数字。 

这部分内容是chart对象的属性,也就是说可以在<chart 之后应用的内容,下面我们举几个例子进行说明。 
1. 调用不同的调色板颜色 
如:palette='4' 
       

2显示自定义的右键菜单和链接 
       showAboutMenuItem='1' aboutMenuItemLabel='James Wang’s 教程' 
aboutMenuItemLink=’lesson1.html’ 



这里需要有点注意: 
1. 由于flash内部安全机制的原因,这里的链接只能是本域内的文件 
2. 链接的文件如果是n-lesson1.html则在新窗口打开,注意这时的物理文件还是lesson1.html 
如果想在帧内链接 用F-做前缀 
3. 支持整个图表作为一个热点链接,语法为 
clickurl=’n-http://www.cnblogs.com/tippoint’ 
注意这样的代码只能运行在服务器模式下,如http://localhost/lesson1.html下的点击才能有效,在文件模式下的访问,如 
http://www.cnblogs.com/教程/source/lesson1.html 是不起作用的。

分享到:
评论

相关推荐

    FusionChartsFree V2.2

    8. **示例代码**:提供的压缩包中很可能包含了各种图表的实例代码,这可以帮助开发者快速上手,通过参考示例了解如何配置数据源、设置图表属性以及如何在网页中嵌入图表。 9. **文档支持**:FusionCharts通常会提供...

    FusionChartsFree及中文开发指南

    3. **图表属性和配置**:详细列举了可配置的图表属性,帮助调整图表外观和行为。 4. **数据格式**:讲解如何组织和传递数据给FusionCharts,包括XML、JSON、以及服务器端数据源的对接。 5. **高级功能**:如图例、...

    FusionChartsFree 中文开发文档

    2. **设置图表属性**: 使用`setChartAttributes()`方法配置图表的基本属性,如宽度、高度、标题、数据源等。 3. **数据XML/JSON**: 数据可以以XML或JSON格式提供,通过`setXMLData()`或`setJSONData()`方法设置。 4....

    FusionChartsFree2.2包和中文使用手册

    6. **API与方法**:讲解FusionCharts的JavaScript API,包括初始化图表、更新图表、获取图表数据等方法。 7. **自定义和扩展**:讨论如何通过CSS和JavaScript自定义图表的外观,以及如何通过FusionCharts的扩展机制...

    FusionChartsFree官方示例

    FusionCharts支持XML、JSON、CSV等多种数据格式,开发者可以选择适合项目需求的方式。在示例中,会展示如何将数据嵌入到HTML文档内,或者通过外部文件加载。 4. **图表类型**:深入学习每种图表类型的特点和用法,...

    FusionChartsFree

    4. **易用性**:通过简单的JavaScript API和XML数据格式,开发者可以快速集成图表到项目中,无需深厚的图形设计技能。 5. **自定义能力**:允许调整颜色、字体、标签、工具提示等,以实现个性化图表设计。 6. **...

    FusionChartsFree及其教程

    4. **API参考**:查阅官方提供的API文档,了解各个函数和方法的具体用法。 5. **问题解决**:学习如何排查和解决在使用过程中遇到的问题,如浏览器兼容性、数据加载错误等。 **四、FusionCharts Free的局限性与...

    FusionChartsFree.CHM

    4. **图表属性与配置**:详述如何通过JavaScript API和XML/JSON数据来定制图表的外观和行为,包括颜色、样式、标签、图例、工具提示、动画效果等。 5. **交互功能**:FusionCharts的交互性是其一大亮点,文档会展示...

    一个用FusionChartsFree制作的flash报表

    通过JavaScript API,开发者可以控制图表的各种属性,如颜色、标题、图例、工具提示等,还可以实现动态更新和交互功能。 5. **图表的互动性**:FusionCharts Free的图表具有良好的互动性,用户可以通过点击图表元素...

    jsp 曲线图显示 FusionChartsFree

    3. **创建数据源**: FusionCharts需要JSON或XML格式的数据来绘制图表。在JSP中,你可以使用Java代码动态生成这些数据。例如,你可以创建一个简单的Java对象数组来存储数据点,然后将其转换为JSON字符串。 4. **初始...

    FusionChartsFree设置指南

    官方网站提供了详细的API文档、示例库和社区论坛,帮助开发者解决在使用过程中遇到的问题。 通过阅读和实践《FusionCharts Free设置指南V1.0.docx》中的内容,您将能够熟练掌握FusionCharts的配置和应用,从而在...

    FusionCharts Free中文开发指南 (完全版)

    然后,你可以通过引用这个库来创建图表实例,定义图表类型、数据源和各种属性。 在《FusionCharts Free中文开发指南》中,你将学习如何配置数据源。数据可以静态写入HTML,也可以动态从服务器获取(如通过XML、JSON...

    fusioncharts 例子 myeclipse

    然后,使用JavaScript来初始化FusionCharts对象,设置图表类型、宽度、高度、数据源等属性。 4. **数据源**:FusionCharts的数据可以来自JSON、XML或者JavaScript对象。在本例中,你可能需要创建一个JavaScript对象...

Global site tag (gtag.js) - Google Analytics