FusionChart学习笔记(部分)

FusionChart学习笔记(部分)
目录

第一阶段    1

一、创建第一个FusionChart    1

(1)导入js文件    1

(2)定义Div Id    1

(3)定义xml格式的数据文件    1

(4)编写js代码    1

二、使用JSON作为数据源    1

(1)使用.json文件    1

(2)使用Json对象    1

三、改变图表类型    1

四、创建复合型图表(多数据)    1

(1)创建xml数据文件    1

(2)编写js代码    1

(3)生成的图表如下所示    1

五、创建复合型图表(多图形)    1

(1)创建xml数据文件    1

(2)编写js代码    1

(3)生成的图表如下所示    1

六、创建复合型图表(多单位)    1

(1)创建xml数据文件    1

(2)编写js代码    1

(3)生成的图表如下所示    1

七、创建散点图    1

(1)创建xml数据文件    1

(2)编写js代码    1

(3)生成的图表如下所示    1

八、创建气泡式图表    1

(1)创建xml数据文件    1

(2)编写js代码    1

(3)生成的图表如下所示    1

九、一个页面呈现多种图表    1

十、使用FusionCharts的Jquery插件作图    1

十一、为Chart图加上超链接    1

(1)xml数据文件    1

(2)JS代码    1

(3)结果    1

十二、导出到图片或PDF文件    1

第二阶段    1

一、XML    1

(1)Single series charts    1

(2)Multi-Series Charts 用来比较多个数据集    1

二、JSON    1

第三阶段    1

一、边框和背景色    1

第一阶段

一、创建第一个FusionChart

(1)导入js文件

把FusionCharts.js 、 - jquery.min.js、 FusionCharts.HC.Charts.js和 FusionCharts.HC.js拷贝到项目某个文件夹中，并导入FusionCharts.js 到网页中。不需要导入其余3个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">

//参数依次为：swf文件的相对路径，自定义的图表Id(为了兼容性，不建议使用数字或空格作为id)，宽，高(宽高为像素时不需要写px),调试模式开关（0为关闭，）

var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "0");

myChart.setXMLUrl("Data.xml");

myChart.render("chartContainer");

//这一句可以代替上面3句代码

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'/>



<set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/>



<set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/>



<set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/>



<set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/>



二、使用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" ?>

<chart caption='2种产品周销量统计' 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)生成的图表如下所示

九、一个页面呈现多种图表

注意事项：
1. 每一个图表都需要有一个唯一的DOM Id
2. 图表的变量名不能相同
3. 每一个图表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

"400",//可选，默认400

height: "300",//可选，默认300

id: "myChartId"//可选

});

});

</script>

</body>

[其他可能的参数]
1. renderer Chart图渲染引擎。可选值为：flash(默认)或javascript
2. bgColor 背景色。可选，默认为#FFFFFF
3. 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)中添加导出配置。
1. exportEnabled='1'//启用导出功能
2. exportAtClient='0'//服务器端导出
3. exportHandler='index.php'//导出处理程序(服务器端导出)
第二阶段

FusionChart数据格式

一、XML

在FusionCharts中有4种属性，分别是：Boolean、Number、String、Hex Color Code

并且，特殊字符需要转义，比如：' " %，用&quot 表示'

(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' />



<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) bgAlpha 示例：bgAlpha="40" 可选值为0到100

其他示例：<chart ... showBorder='1' borderColor='FF0000' borderThickness='2' borderAlpha='50' ..>
相关阅读:
[转载]MATLAB 图像处理命令
 html Window与document区别（轉）
ICMP数据包结构(转)
CString,string,char*之间的转换（转）
word或dword区别
 VS2010 皮肤扩展
 Unicode _T和L和_TXET
转：git 的常用命令
 git fetch 和 git pull 的区别
 mac git 命令自动补全
原文地址：https://www.cnblogs.com/amintan/p/4040344.html

FusionChart学习笔记(部分)

第一阶段

一、创建第一个FusionChart

(1)导入js文件

(2)定义Div Id

(3)定义xml格式的数据文件

(4)编写js代码

二、使用JSON作为数据源

(1)使用.json文件

(2)使用Json对象

三、改变图表类型

四、创建复合型图表(多数据)

(1)创建xml数据文件

(2)编写js代码

(3)生成的图表如下所示

五、创建复合型图表(多图形)

(1)创建xml数据文件

(2)编写js代码

(3)生成的图表如下所示

六、创建复合型图表(多单位)

(1)创建xml数据文件

(2)编写js代码

(3)生成的图表如下所示

七、创建散点图

(1)创建xml数据文件

(2)编写js代码

(3)生成的图表如下所示

八、创建气泡式图表

(1)创建xml数据文件

(2)编写js代码

(3)生成的图表如下所示

九、一个页面呈现多种图表

十、使用FusionCharts的Jquery插件作图

十一、为Chart图加上超链接

(1)xml数据文件

(2)JS代码

(3)结果

十二、导出到图片或PDF文件

第二阶段

一、XML

(2)Multi-Series Charts 用来比较多个数据集

二、JSON

第三阶段

一、边框和背景色