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' ..>
最新文章
- 在vim中使用查找命令查找指定字符串
- 关于Android中ArrayMap/SparseArray比HashMap性能好的深入研究
- Database Primary key and Foreign key [From Internet]
- windows下用eclipse+goclipse插件+gdb搭建go语言开发调试环境
- 使用Hive或Impala执行SQL语句，对存储在HBase中的数据操作
- Eclipse 分屏显示同一个文件
- HTML5简介及HTML5的发展前景
- jquery的each()函数用法
- Java中的ExceptionInInitializerError异常及解决方法
- LeetCode OJ 292.Nim Gam148. Sort List
- 一些矩阵范数的subgradients
- 最近公共祖先（LCT）
- Linux下的几种IPC方式及其C语言实现
- C# asp.net webapi下支持文件下载输出接口
- Redis系列三：reids常用命令
- bzoj千题计划176：bzoj1199: [HNOI2005]汤姆的游戏
- spring中获取applicationContext
- JS实现填报时对修改过的单元格进行标识
- 【搜索】POJ-3187 枚举全排列
- Spring Cloud Summary