FusionChart学习笔记(部分)

把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>

(4)编写js代码

//参数依次为：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属性即可。也就是

二、使用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对象

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>

三、改变图表类型

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" ?>

</categories>

</dataset>

</dataset>

</chart>

(2)编写js代码

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" ?>

</categories>

</dataset>

<dataset seriesName="Product B" renderAs='Area'>

</dataset>

</chart>

(2)编写js代码

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" ?>

</categories>

</dataset>

</dataset>

</chart>

(2)编写js代码

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" ?>

</dataset>

</dataset>

</chart>

(2)编写js代码

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" ?>

</dataset>

</dataset>

</chart>

(2)编写js代码

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>

</head>

<body>

$(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>

[其他可能的参数]

renderer Chart图渲染引擎。可选值为：flash(默认)或javascript
bgColor 背景色。可选，默认为#FFFFFF
scaleMode 缩放方式。可选，可选值为：NoScale、showAll、ExactFit、noBorder

十一、为Chart图加上超链接

以年度Chart图和季度Chart图为例。

(1)xml数据文件

</chart>

</linkeddata>

</chart>

</linkeddata>

</chart>

</linkeddata>

</chart>

</linkeddata>

</chart>

(2)JS代码

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

并且，特殊字符需要转义，比如：' " %，用&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" ?>

</trendlines>

</definition>

</application>

</styles>

</chart>

其中，有分段的颜色和超链接

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