这里 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> 元素属性
功能属性
|
这些属性可以控制图表上的各种功能元素。例如,你可以选择显示/隐藏数据标签,数据值,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’
分享到:
相关推荐
**FusionCharts XT Evaluation** 是一个...在实际项目中,FusionCharts XT 可以通过解压名为"FusionCharts_XT_Evaluation"的压缩包来获取并使用,包括示例代码、文档和其他资源,从而快速上手并实现数据可视化的需求。
这个名为"FusionCharts_demo.zip"的压缩包包含了FusionCharts的演示文件,特别关注了柱状图的展示,这是一种广泛用于数据表示和分析的图表类型。在深入探讨之前,先了解一下涉及的关键词: 1. **FusionCharts**:...
FusionCharts Suite XT 是一款强大的数据可视化工具,版本号为3.10.1,封装在名为"fusioncharts-suite-xt3.10.1.zip"的压缩包中。这款JavaScript图表库专为创建交互式、动画丰富的图表而设计,能够帮助开发者将复杂...
3. **创建图表对象**:在JavaScript代码中,实例化FusionCharts对象,传入图表类型和JSON数据。 ```javascript var chartObj = new FusionCharts({ type: 'column2d', renderAt: 'chart-container', width: '600...
- 在Web工程下新建一个名为`fusioncharts.jsp`的文件。 - 导入以下三个JS文件: - `js/ajax/ajax.js`:主要用于发送AJAX请求获取JSON数据。 - `fcf/js/ChangeFusionCharts.js`:负责将JSON数据转换为...
FusionCharts提供了丰富的图表属性和配置选项,允许开发者自定义颜色、样式、动画效果、交互行为等。例如,`palette`属性用于设置图表颜色方案,`showValues`决定是否显示每个数据点的值,`formatNumberScale`控制...
这个名为"FusionCharts.rar"的压缩包包含了用于在网页上实现动态、交互式图表功能的所有必要资源。FusionCharts的主要特点在于它能够直接在客户端运行,无需服务器端支持,这大大减轻了服务器的负担,提高了数据可视...
在这个名为“fusionChartsGanttDemo”的示例中,我们将探讨如何使用FusionCharts来创建和展示甘特图。 首先,让我们深入了解FusionCharts。FusionCharts是由FusionCharts Suite XT提供的一个组件,它允许开发者通过...
接下来,我们看到一个JavaScript块,其中定义了一个名为`column2D`的FusionCharts对象。这个对象通过调用`new FusionCharts()`来创建,并传入以下参数: 1. 图表类型(这里是2D柱状图,由`"FusionCharts/MSColumn2D....
然后,创建一个div元素作为图表容器,并通过JavaScript代码实例化FusionCharts对象,设置图表类型(这里是饼形图)、宽度、高度、数据源以及样式等属性。数据源可以是嵌入在代码中的JSON字符串,也可以是从服务器...
在这个例子中,设置了图表标题为"(我们)一年收入统计",X轴名为"月份",Y轴名为"收入明细",并设置了图表的颜色、字体和阴影等相关样式。 `data`对象则包含了图表的数据,是一个JSON数组,每个元素代表一个柱子,...
这里创建了一个名为`doughnut2D`的新FusionCharts对象,指定图表类型为"Doughnut2D.swf",这对应2D环饼图。`"doughnut2DId"`是图表的唯一ID,`"100%"`和`"540"`分别代表宽度和高度,`"0"`表示无边框。 接下来,`...
本资源名为“FusionChartsFree使用范例”,显然是一份详细的教程或示例集,帮助用户了解并学习如何在不同编程语言环境中使用FusionCharts。 FusionCharts支持多种编程语言,包括但不限于HTML、JavaScript、PHP、ASP...
在示例中,我们创建了一个名为`bar2D`的新对象,指定图表类型、ID、尺寸以及是否初始化。接着,通过`setXMLUrl`方法设置数据源URL,并使用`render`方法将图表渲染到指定的DOM元素中。 ```javascript $(function(){...
这个名为"FusionChart_Demo"的压缩包文件显然包含了用于教学和实践目的的FusionCharts入门示例。让我们深入了解一下FusionCharts及其在实际应用中的相关知识点。 **FusionCharts简介** FusionCharts是一款基于Web的...
这个名为"FusionChartsDemo"的项目显然包含了使用FusionCharts实现的各种图表示例,帮助我们了解如何在实际应用中集成和使用这个库。下面我们将深入探讨FusionCharts的相关知识点及其在这些示例中的应用。 1. **...
6. **自定义样式和主题**:FusionCharts提供了预设的主题和样式,同时也允许你自定义颜色、字体、边框等,以适应你的品牌和设计。 7. **兼容性和跨平台**:FusionCharts不仅支持所有主流的现代浏览器,还通过HTML5...
此外,FusionCharts还支持自定义颜色、样式、动画效果,以及丰富的API和事件,允许开发者进行深度定制,满足个性化需求。例如,你可以通过API设置图表的标题、副标题、图例、数据标签等,还可以控制图表的交互行为,...
创建FusionCharts图表的基本步骤是实例化一个图表对象并传递必要的配置参数。这些参数包括图表类型、宽度、高度、数据源等。例如,创建一个简单的柱状图: ```javascript var chart = new FusionCharts({ type: '...