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 ...
随机推荐
- BZOJ 1028 麻将
Description 麻将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到九的九种牌),每种牌各四张.在 ...
- [BZOJ 3238] [AHOI 2013] 差异 【后缀数组 + 单调栈】
题目链接:BZOJ - 3238 题目分析 显然,这道题就是求任意两个后缀之间的LCP的和,这与后缀数组的联系十分明显. 求出后缀数组后,求出字典序相邻两个后缀的LCP,即 Height 数组. 那么 ...
- 整整68页学习C++的文章
有空看看,有不少好东西: http://dev.21tx.com/language/c/index.shtml
- sicp第1章
牛顿迭代法求平方: (define (sqrt-iter guess x) (if (good-enough? guess x) guess (sqrt-iter (improve guess x) ...
- 中国linux论坛
linux在国内经过十多年的发展,已慢慢走向成熟.昔日如雨后春笋般成长的linux网站,现在已出现了明显的两极分化.一部分已成长壮大,公司化运作,一部分面临域名出售或关闭的境地. 以笔者经验,以下十 ...
- bzoj3668
noi水题,直接推出来每一位上取什么值才能取1直接搞就可以了 ..] of longint; x,n,i,j,k,t,m,ans:longint; fl:boolean; s:string; ch:c ...
- Linux Shell编程（3）——运行shell脚本
写完一个脚本,你能够运行它用命令:sh scriptname, [5] 另外也也可以用bash scriptname. 来执行(不推荐使用:sh <scriptname, 因为这样会禁止脚本从标 ...
- 使用DateAdd方法向指定日期添加一段时间间隔，使用TimeSpan对象获取时间间隔
一:使用DateAdd方法向指定日期添加一段时间间隔,截图 二:代码 using System; using System.Collections.Generic; using System.Comp ...
- PostgreSQL安装详细步骤（windows）
原文地址:http://blog.chinaunix.net/uid-354915-id-3498734.html PostgreSQL安装:一.windows下安装过程安装介质:postgresql ...
- Jenkins 三： Jenkins CLI
简介 该工具允许用户通过命令行来操作jenkins. 使用方法 1. 下载 jenkins_cli.jar. 下载地址: http://localhost:8080/jnlpJars/jenkins- ...