FusionChart学习笔记(部分)
目录
(2)Multi-Series Charts 用来比较多个数据集 1
第一阶段
一、创建第一个FusionChart
(1)导入js文件
把FusionCharts.js个js文件到网页中，其导入动作由FusionChart完成。
(2)定义Div Id
在网页中定义一个带有Id的Div标签以供生成图表的时候使用。
(3)定义xml格式的数据文件
<?xml version="1.0" encoding="utf-8" ?>
<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Amount' numberPrefix='$'>
<set label='Week 1' value='14400' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
</chart>
(4)编写js代码
<script type="text/javascript">
为关闭，）
var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "0");
myChart.setXMLUrl("Data.xml");
myChart.render("chartContainer");
句代码
var myChart = FusionCharts.render("FusionCharts/Column3D.swf", "myChartId", "400", "300", "chartContainer", "Data.xml");
</script>
(5)生成的图如下所示：
还可以给值加上超链接，只需要加link属性即可。也就是
<set label='Jan' value='17400' link='DemoLinkPages/DemoLink1.html'/>
<!-- Simple Link -->
<set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/>
<!-- Link in new window -->
<set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/>
<!-- Link in a frame -->
<set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/>
<!-- Link in a pop-up -->
<set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/>
<!-- JavaScript function as link -->
二、使用JSON作为数据源
(1)使用.json文件
{
"chart": {
"caption": "Weekly Sales Summary",
"xAxisName": "Week",
"yAxisName": "Sales",
"numberPrefix": "$"
},
"data": [
{ "label": "Week 1", "value": "14400" },
{ "label": "Week 2", "value": "19600" },
{ "label": "Week 3", "value": "24000" },
{ "label": "Week 4", "value": "15700" }
]
}
(2)使用Json对象
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "0");
//myChart.setJSONUrl("Data.json");//IIS6默认不支持.json后缀，需要进行后缀映射
myChart.setJSONData({//也可以以对象或字符串的形式传Json格式数据
"chart": {
"caption": "Weekly Sales Summary",
"xAxisName": "Week",
"yAxisName": "Sales",
"numberPrefix": "$"
},
"data": [
{ "label": "Week 1", "value": "14400" },
{ "label": "Week 2", "value": "19600" },
{ "label": "Week 3", "value": "24000" },
{ "label": "Week 4", "value": "15700" }
]
});
myChart.render("chartContainer");
</script>
三、改变图表类型
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "0");
//myChart.setJSONUrl("Data.json");//IIS6默认不支持.json后缀，需要进行后缀映射
myChart.setJSONData({//也可以以对象的形式传Json格式数据
"chart": {
"caption": "Weekly Sales Summary",
"xAxisName": "Week",
"yAxisName": "Sales",
"numberPrefix": "$"
},
"data": [
{ "label": "Week 1", "value": "14400" },
{ "label": "Week 2", "value": "19600" },
{ "label": "Week 3", "value": "24000" },
{ "label": "Week 4", "value": "15700" }
]
});
//myChart.render("chartContainer");
myChart.src = 'FusionCharts/Pie3D.swf';
myChart.render("chartContainer");
</script>
通过改变Chart的src地址来改变图表类型。还可以动态改变其他参数。
$("#chartContainer").updateFusionCharts({ "swfUrl": "FusionCharts/Pie3D.swf" });
$("#chartContainer").updateFusionCharts({ "dataSource": XMLAsString, "dataFormat": "xml" });//改变数据
四、创建复合型图表(多数据)
(1)创建xml数据文件
<?xml version="1.0" encoding="utf-8" ?>
种产品周销量统计' xAxisName='周' yAxisName='销量' numberPrefix='￥'>
<categories>
<category Label="第一周"/>
<category Label="第二周"/>
<category Label="第三周"/>
<category Label="第四周"/>
</categories>
<dataset seriesName="产品 A">
<set value='14400' />
<set value='19600' />
<set value='24000' />
<set value='15700' />
</dataset>
<dataset seriesName="产品 B">
<set value='12000' />
<set value='15000' />
<set value='20000' />
<set value='11000' />
</dataset>
</chart>
(2)编写js代码
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/MSColumn3D.swf", "myChartId", "400", "300", "0");
myChart.setXMLUrl("index4.0.xml");
myChart.render("chartContainer");
</script>
(3)生成的图表如下所示
如果想展现成如下这种样式的图表，只需要更改一下src的值为：FusionCharts/StackedColumn3D.swf即可。
五、创建复合型图表(多图形)
(1)创建xml数据文件
<?xml version="1.0" encoding="utf-8" ?>
<chart caption='Weekly Sales Summary for two Products' xAxisName='Weeks' yAxisName='Amount' numberPrefix='$'>
<categories>
<category Label="Week1"/>
<category Label="Week2"/>
<category Label="Week3"/>
<category Label="Week4"/>
</categories>
<dataset seriesName="Product A">
<set value='14400' />
<set value='19600' />
<set value='24000' />
<set value='15700' />
</dataset>
<dataset seriesName="Product B" renderAs='Area'>
<set value='12000' />
<set value='15000' />
<set value='20000' />
<set value='11000' />
</dataset>
</chart>
(2)编写js代码
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts( "FusionCharts/MSCombi2D.swf ","myChartId", "400", "300", "0" );
myChart.setXMLUrl("Index5.0.xml");
myChart.render("chartContainer");
</script>
(3)生成的图表如下所示
六、创建复合型图表(多单位)
(1)创建xml数据文件
<?xml version="1.0" encoding="utf-8" ?>
<chart caption='Weekly Sales Summary for two Products' xAxisName='Weeks' yAxisName='Amount' numberPrefix='$'>
<categories>
<category Label="Week1"/>
<category Label="Week2"/>
<category Label="Week3"/>
<category Label="Week4"/>
</categories>
<dataset seriesName="Revenue">
<set value='26400' />
<set value='35600' />
<set value='44000' />
<set value='26700' />
</dataset>
<dataset seriesName='Total Quantity' ParentYAxis='s' showValues='0'>
<set value='160' />
<set value='190' />
<set value='220' />
<set value='160' />
</dataset>
</chart>
(2)编写js代码
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/MSColumn3DLineDY.swf", "myChartId", "400", "300", "0");
myChart.setXMLUrl("index6.0.xml");
myChart.render("chartContainer");
</script>
(3)生成的图表如下所示
七、创建散点图
(1)创建xml数据文件
<?xml version="1.0" encoding="utf-8" ?>
<chart palette='2' caption='Server Performance' yAxisName='Response Time (sec)' xAxisName='Server Load (TPS)' yAxisMaxValue='7'>
<dataset seriesName='Server 1' color='009900' anchorSides='3' anchorRadius='4' anchorBgColor='0094ff' anchorBorderColor='009900'>
<set y='2.4' x='6' />
<set y='3.5' x='32' />
<set y='2.5' x='43' />
<set y='4.1' x='48' />
</dataset>
<dataset seriesName='Server 2' color='0000FF' anchorSides='4' anchorRadius='4' anchorBgColor='black' anchorBorderColor='0000FF'>
<set y='1.4' x='23'/>
<set y='1.5' x='29'/>
<set y='1.5' x='33'/>
<set y='1.1' x='41'/>
</dataset>
</chart>
(2)编写js代码
<div id="chartContainer"> </div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/Scatter.swf", "myChartId", "400", "300", "0");
myChart.setXMLUrl("Index7.0.xml");
myChart.render("chartContainer");
</script>
(3)生成的图表如下所示
八、创建气泡式图表
(1)创建xml数据文件
<?xml version="1.0" encoding="utf-8" ?>
<chart caption='标题' subCaption='副标题' yAxisName='Y轴名称' xAxisName='X轴名称' yNumberSuffix='%' yAxisMaxValue='150' xAxisLabelDisplay='auto' numVDivLines='9' >
<dataset seriesName='Equities' >
<set y='20' x='1.5' z='15000' />
<set y='75' x='4.5' z='10000' />
<set y='105' x='6' z='30000' />
<set y='70' x='7' z='16000' />
<set y='20' x='8' z='15000' />
</dataset>
<dataset seriesName='Mutual Funds' >
<set y='25' x='3.5' z='15000'/>
<set y='10' x='8.5' z='10000'/>
<set y='75' x='8.5' z='16000'/>
</dataset>
</chart>
(2)编写js代码
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/Bubble.swf", "myChartId", "400", "300", "0");
myChart.setXMLUrl("Index8.0.xml");
myChart.render("chartContainer");
</script>
(3)生成的图表如下所示
九、一个页面呈现多种图表
注意事项：
- 每一个图表都需要有一个唯一的DOM Id
- 图表的变量名不能相同
- 每一个图表div容器需要分开设置
十、使用FusionCharts的Jquery插件作图
<head>
<title>My First chart</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="FusionCharts/jquery.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.jqueryplugin.js"></script>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#chartContainer").insertFusionCharts({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "Data.xml",
dataFormat: "xmlurl",//可选值为：xmlurl、xml、jsonurl、json
width: "400",//可选，默认400
height: "300",//可选，默认300
id: "myChartId"//可选
});
});
</script>
</body>
[其他可能的参数]
- renderer Chart图渲染引擎。可选值为：flash(默认)或javascript
- bgColor 背景色。可选，默认为#FFFFFF
- scaleMode 缩放方式。可选，可选值为：NoScale、showAll、ExactFit、noBorder
十一、为Chart图加上超链接
以年度Chart图和季度Chart图为例。
(1)xml数据文件
<chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales">
<set label="2004" value="37800" link="newchart-xml-2004-quarterly" />
<set label="2005" value="21900" link="newchart-xml-2005-quarterly" />
<set label="2006" value="32900" link="newchart-xml-2006-quarterly" />
<set label="2007" value="39800" link="newchart-xml-2007-quarterly" />
<linkeddata id="2004-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2004" xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="11700" />
<set label="Q2" value="8600" />
<set label="Q3" value="6900" />
<set label="Q4" value="10600" />
</chart>
</linkeddata>
<linkeddata id="2005-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2005" xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="5500" />
<set label="Q2" value="7100" />
<set label="Q3" value="3900" />
<set label="Q4" value="5400" />
</chart>
</linkeddata>
<linkeddata id="2006-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2006" xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="6700" />
<set label="Q2" value="9200" />
<set label="Q3" value="10800" />
<set label="Q4" value="6200" />
</chart>
</linkeddata>
<linkeddata id="2007-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2007" xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="8900" />
<set label="Q2" value="6600" />
<set label="Q3" value="11200" />
<set label="Q4" value="13100" />
</chart>
</linkeddata>
</chart>
(2)JS代码
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/Column2D.swf", "myChartId", "320", "250", "0");
myChart.setXMLUrl("Index11.xml");
myChart.render("chartContainer");
</script>
(3)结果
十二、导出到图片或PDF文件
处理方式1：服务器端；2、浏览器端(批量导出)
为了使导出功能起作用，需要在数据源(xml/json)中添加导出配置。
- exportEnabled='1'//启用导出功能
- exportAtClient='0'//服务器端导出
- exportHandler='index.php'//导出处理程序(服务器端导出)
第二阶段
FusionChart数据格式
一、XML
在FusionCharts中有4种属性，分别是：Boolean、Number、String、Hex Color Code
并且，特殊字符需要转义，比如：' " %，用" 表示'
(1)Single series charts
包括Column 2D, Column 3D, Bar 2D, Line, Area 2D, Pie 2D, Pie 3D, Doughnut 2D, Doughnut 3D, Pareto 2D 和Pareto 3D.
<?xml version="1.0" encoding="utf-8" ?>
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$' >
<set label="Jan" value="17400" color="3300FF" toolTip="January, 17400" link="details.asp?month=jan" showLabel="0"/>
<set label='May' value='29600' color="0094ff" />
<set label='September' value='37800' />
<!--<vLine color='FF5904' thickness='2'/>-->
<set label='July' value='31800' />
<set label='August' value='39700' />
<set label='September' value='37800' />
<trendlines>
<line startValue='22000' color='00cc00' displayValue='均线' />
<line startValue='-12000' color='0094ff' displayValue='预警线' />
<line startValue='3202' color='silver' displayValue='自定义' />
</trendlines>
<styles>
<definition>
<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
</definition>
<application>
<apply toObject='Canvas' styles='CanvasAnim' />
</application>
</styles>
</chart>
其中，有分段的颜色和超链接
<set label="Jan" value="17400" color="3300FF" toolTip="January, 17400" link="details.asp?month=jan" showLabel="1"/>
(2)Multi-Series Charts 用来比较多个数据集
二、JSON
第三阶段
快速配置
一、边框和背景色
(1) bgColor 示例：bgColor="647881" 如果需要渐变色。用","隔开如：bgColor='999999,FFFFFF'
(2)到100
其他示例：<chart ... showBorder='1' borderColor='FF0000' borderThickness='2' borderAlpha='50' ..>
FusionChart学习笔记(部分)的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- RHEL/CentOS 6.x 系统服务详解
PS:RHEL/CentOS 6.x的系统服务比5.x系列的要多了很多新面孔,估计很多童鞋不甚理解,网上这方面资料也很少.理解这个对运维人员是必要的,因为开启不必要的服务越 多,系统就相对越不安全.不 ...
- Dll方式的线程，需要引用这个
{== D6DLLSynchronizer =================================================} {: This unit handles the D6 ...
- CN消息的来源——父窗口不知道怎么处理，于是把这个消息加上CN_BASE在分发到实际的子窗体
VCL存在一些非API消息以供其内部使用,为什么要这样做呢?这要从WM_COMMAND & WM_NOTIFY消息说起,我们说WM_COMMAND消息并不是直接发给实际产生消息的窗体,而是发送 ...
- Eclipse控制台中文乱码
换了OS真是,主要就是对Eclipse的配置操作不熟悉.用着不顺手.源文件一直都是按照google java style的做法保存为UTF-8.现在显示乱码,就得改Eclipse解码的配置为 UTF- ...
- 对于唯一索引使用唯一条件搜索, InnoDB 只锁定找到的index record,不是它之前的区间
| test100 | CREATE TABLE `test100` ( `sn` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增编号', `phoneNo` ...
- window7 64位安装Python
Python下载地址:https://www.python.org/download/releases/2.7.8/ 选择64位的安装,然后双击打开下载的文件,默认一步步安装. 其中有一个步骤如下图: ...
- HDOJ迷宫城堡(判断强连通 tarjan算法)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- VisualSVN_Server安装_配置图文教程
前言: 不错的文章 对一个我这样的菜鸟来说,这个教程很容易理解,说它图文并茂并不为过.所以就把它整理成了文档,给大家分享. 文章版权归原作者Forrest Zhang所有. 原文出处: http:// ...
- 3 D. Least Cost Bracket Sequence
题目大意: 这是一个规则的字符括号序列.一个括号序列是规则的,那么在序列里面插入‘+’ 和 ‘1’ 会得到一个正确的数学表达式. 合法:(())(), (),(()(())) 不合法:)(,((),( ...
- bithrtree
#include "stdio.h" #include "stdlib.h" #define OK 1 #define ERROR 0 typedef char ...