FusionCharts強大無比，使用版本是FusionCharts3.2 (後面提供下載)破解版。web程序中無須jar包，
先看FusionChart如何獲取數據：最常用的是setDataXML 和 setDataURL
setDataXML 是接收xml字符串，根據字符串生成圖表信息，大多的圖表是需要後臺動態的獲取數據的，適合於實時圖表。
setDataURL 是接收xml路徑的字符串，如果後臺會生成xml文件，也是可以的，不適合實時圖表。如果是固定的圖表信息這個最適合。
所以setDataXML 比較實用，setDataJSON也一樣。
下面的工具類的目的是給Action提供使用，提供最基本的，最常規的屬性。如果是自定義很強，需要自己生成相應的xmldata,工具類通用了二十多種效果(可能還有，破解版的swf 不多)。
代碼還不完善，基本功能夠用了,單列和多列都可以使用，只需要改改相應的swf即可。
JSP中有一個自定義的圖表，xmldata直接寫在JSP裏面了。
自定義的圖表實現了很多非常規功能，如導出JPEG/JPG/PDF 導出進度條中文提示，導出按鈕中文。斷點的，數字和文字格式等，chart顯示的效果等，詳細用法在JSP中有註釋。
由於結構的屬性太多了，要查看裏面的屬性可以去FusionCharts_Evaluation\Code\ChartXSD\xxx.xsd等裏面查看有哪些標籤，哪些屬性，以及屬性類型等。
直接上代碼
chart:<category label='Jun' /> <vLine color='FF5904' thickness='2'/>
chart:<trendlines><line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/> </trendlines>
import java.util.Random;
/*
* 圖表數據集合
* 功能：組合數據,可自定義顏色，沒有自定義顏色前12個爲randomColor的順序，
* 超過部分隨意選擇randomColor的一種顏色
* 對於下面自定義很強的 需要自己生成xmldata
* set alpha = '50' 透明度爲50%
* set dashed='1' 虛線狀態顯示
* set 對於Line anchorSides='7' 顯示的點爲幾邊形 anchorRadius = '4' 形狀大小
* set anchorBorderColor='A186BE' 點 的邊框顏色 anchorBgColor='8BBA00' 點的背景色
* set 中如果沒有value屬性 還是留有空間 只是沒顯示 空元素
*/
public class DataSet {
private String[] randomColor = new String[] {
"AFD8F8", "F6BD0F", "8BBA00","FF8E46","008E8E","D64646",
"8E468E", "588526", "B3AA00","008ED6", "9D080D", "A186BE" };
private String seriesName; // 標示
private String[] setNames; // 名稱
private String[] setValues;// 值
private String[] setColors;// 顏色
private String[] setTooltexts;// 提示信息tooltext='信息：{br}xxx...'
public String[] getSetNames() {
return setNames;
}
public void setSetNames(String[] setNames) {
this.setNames = setNames;
}
public String[] getSetColors() {
return setColors;
}
public void setSetColors(String[] setColors) {
this.setColors = setColors;
}
public String getSeriesName() {
return seriesName;
}
public void setSeriesName(String seriesName) {
this.seriesName = seriesName;
}
public String[] getSetValues() {
return setValues;
}
public void setSetValues(String[] setValues) {
this.setValues = setValues;
}
/*
* 多列數據組合
*/
public String createDataSet() {
String dataSet = "<dataset seriesName='" + seriesName + "'>";
dataSet+=createSets(dataSet,false);
dataSet += "</dataset>";
return dataSet;
}
/*
* 公用到普通的Column2D Column3D Line2D Line3D 等
*/
public String createSets(String dataSet,boolean boo) {
String newDataSet = "";
for (int i = 0; i < setValues.length; i++) {
if (setColors != null) {
if (setNames != null) {
newDataSet += "<set name = '" + setNames[i] + "' value='" + setValues[i] + "' color = '" + setColors[i]+ "'/>";
} else{
if(boo){
if(i>randomColor.length){
int ai = new Random().nextInt(12);
newDataSet += "<set value='" + setValues[i] + "' color = '" + randomColor[ai] + "'/>";
}else{
newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";
}
}else{
newDataSet += "<set value='" + setValues[i] + "' color = '" + setColors[i] + "'/>";
}
}
} else {
newDataSet += "<set value='" + setValues[i] + "'/>";
}
}
return newDataSet;
}
}
/*
* 圖表工具
* 功能：支持MS多列系列圖表，和單例系列圖標
* 對於下面自定義很強的 需要自己生成xmldata
* chart x軸下標題文字 labelDisplay='Rotate' 垂直顯示 slantLabels='1' 45 度傾斜
* chart x軸下標題文字 labelDisplay = "Stagger" staggerLines='n' 顯示的行數 如果文字過長 就各行對應顯示
* chart x軸下標題文字 labelStep='n' 文字每隔幾個一顯示
* chart x軸 上的柱頂部固定的文字值 rotateValues='1' 垂直顯示
* chart connectNullData='1' 對於Line,跳過空元素直接與下一個節點連接
// lineDashGap='6' 虛線顯示空元素的連接 需要程序處理上一個節點爲dashed='1'
* chart lineDashGap = '5' 虛線的點的間隔
* chart decimals='2' 小數點後2位數 其他類似 對於數據差距比較很小(最大值最小值最少相差在1之內) 適用
// 如果想讓柱狀的值顯示小數點後一位 forceDecimals='1' (Y軸顯示還是2位或者更多)
* chart formatNumberScale='0' 顯示格式爲 234,344,679
* chart formatNumberScale='0' formatNumber='0' 顯示格式爲原始格式
*/
public class Chart {
private String caption;// 標題
private String xAxisName;
private String yAxisName;
private String showValues;
private String numberPrefix;
private String[] categories;
private DataSet[] dataset;
private String lineStartValue;
private String lineColor;
private String lineDisplayValue;
private String yAxisMinValue;
private String yAxisMaxValue;
public String getyAxisMinValue() {
return yAxisMinValue;
}
public void setyAxisMinValue(String yAxisMinValue) {
this.yAxisMinValue = yAxisMinValue;
}
public String getyAxisMaxValue() {
return yAxisMaxValue;
}
public void setyAxisMaxValue(String yAxisMaxValue) {
this.yAxisMaxValue = yAxisMaxValue;
}
public String getCaption() {
return caption;
}
public void setCaption(String caption) {
this.caption = caption;
}
public String getxAxisName() {
return xAxisName;
}
public void setxAxisName(String xAxisName) {
this.xAxisName = xAxisName;
}
public String getyAxisName() {
return yAxisName;
}
public void setyAxisName(String yAxisName) {
this.yAxisName = yAxisName;
}
public String getShowValues() {
return showValues;
}
public void setShowValues(String showValues) {
this.showValues = showValues;
}
public String getNumberPrefix() {
return numberPrefix;
}
public void setNumberPrefix(String numberPrefix) {
this.numberPrefix = numberPrefix;
}
public String[] getCategories() {
return categories;
}
public void setCategories(String[] categories) {
this.categories = categories;
}
public DataSet[] getDataset() {
return dataset;
}
public void setDataset(DataSet[] dataset) {
this.dataset = dataset;
}
public String getLineStartValue() {
return lineStartValue;
}
public void setLineStartValue(String lineStartValue) {
this.lineStartValue = lineStartValue;
}
public String getLineColor() {
return lineColor;
}
public void setLineColor(String lineColor) {
this.lineColor = lineColor;
}
public String getLineDisplayValue() {
return lineDisplayValue;
}
public void setLineDisplayValue(String lineDisplayValue) {
this.lineDisplayValue = lineDisplayValue;
}
/*
* MS 多列系列
*/
public String createChartXmlData() {
String chartXmlData = "<chart useRoundEdges='1' caption='" + caption + "' xAxisName='"
+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"
+ showValues + "' numberPrefix='" + numberPrefix + "' "
+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"
+ yAxisMaxValue + "'>";
;
chartXmlData += "<categories>";
for (int i = 0; i < categories.length; i++) {
chartXmlData += "<category label='" + categories[i] + "' />";
}
chartXmlData += "</categories>";
for (int i = 0; i < dataset.length; i++) {
chartXmlData += dataset[i].createDataSet();
}
chartXmlData += " <trendlines><line startValue='" + lineStartValue
+ "' color='" + lineColor + "' displayValue='"
+ lineDisplayValue + "'/></trendlines>";
chartXmlData += "</chart>";
return chartXmlData;
}
/*
* 單個圖標系列
*/
public String createRoutineChartXmlData() {
String chartXmlData = "<graph useRoundEdges='1' caption='" + caption + "' xAxisName='"
+ xAxisName + "' yAxisName='" + yAxisName + "' showValues= '"
+ showValues + "' numberPrefix='" + numberPrefix + "' "
+ " yAxisMinValue = '" + yAxisMinValue + "' yAxisMaxValue = '"
+ yAxisMaxValue + "'>";
chartXmlData += dataset[0].createSets("",true);
chartXmlData += "</graph>";
return chartXmlData;
}
}
Action代碼：
public void test() {// 隨時測試
response.setCharacterEncoding("UTF-8");
Chart chart = new Chart();
chart.setCaption("圖表信息");
chart.setxAxisName("月份");
chart.setyAxisName("交易額");
chart.setShowValues("0");
chart.setNumberPrefix("$");
String[] cs = { "1月", "2月", "3月", "4月", "5月" };
chart.setCategories(cs);
DataSet[] ds = new DataSet[3];// 三個進行對比
for (int i = 0; i < ds.length; i++) {
ds[i] = new DataSet(); // 對比五個月的數據
ds[i].setSeriesName("200" + i + "年");
int a1 = new Random().nextInt(1000);
if (a1 <= 0) {
a1 = 100;
}
int a2 = new Random().nextInt(1000);
if (a2 <= 0) {
a2 = 100;
}
int a3 = new Random().nextInt(1000);
if (a3 <= 0) {
a3 = 100;
}
int a4 = new Random().nextInt(1000);
if (a4 <= 0) {
a4 = 100;
}
int a5 = new Random().nextInt(1000);
if (a5 <= 0) {
a5 = 100;
}
String[] sv = { "" + a1, "" + a2, "" + a3, "" + a4, "" + a5 };
ds[i].setSetValues(sv);
}
chart.setDataset(ds);
chart.setLineStartValue("26000");
chart.setLineColor("91C728");
chart.setLineDisplayValue("Target");
chart.setyAxisMinValue("0"); // 最小值
chart.setyAxisMaxValue("1200");// 最大值
String xmlDate = chart.createChartXmlData();
PrintWriter pw;
try {
pw = response.getWriter();
pw.print(xmlDate);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void test1() {
response.setCharacterEncoding("UTF-8");
Chart chart = new Chart();
chart.setCaption("圖表信息");
chart.setxAxisName("月份");
chart.setyAxisName("交易額");
chart.setShowValues("0");
chart.setNumberPrefix("$");
String[] cs = { "1月", "2月", "3月", "4月", "5月" };
DataSet[] ds = new DataSet[1];// 三個進行對比
ds[0] = new DataSet(); // 對比五個月的數據
ds[0].setSeriesName("2000年");
ds[0].setSetNames(cs);
String[] sv = { "" + 190, "" + 334, "" + 799, "" + 888, "" + 900 };
String[] sc = { "F6BD0F", "AFD8F8", "FF8E46", "008ED6", "A186BE" };
ds[0].setSetColors(sc);
ds[0].setSetValues(sv);
chart.setDataset(ds);
chart.setyAxisMinValue("0"); // 最小值
chart.setyAxisMaxValue("1200");// 最大值
String xmlDate = chart.createRoutineChartXmlData();
PrintWriter pw;
try {
pw = response.getWriter();
pw.print(xmlDate);
} catch (IOException e) {
e.printStackTrace();
}
}
JSP如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>圖表Fusioncharts測試</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="chart/script/FusionCharts.js"></script>
<script type="text/javascript" src="chart/script/FusionChartsExportComponent.js"></script>
<script type="text/javascript">
window.onload = function(){
//chart x軸下標題文字 labelDisplay='Rotate' 垂直顯示 slantLabels='1' 45 度傾斜
//chart x軸下標題文字 labelDisplay = "Stagger" staggerLines='n' 顯示的行數 如果文字過長 就各行對應顯示
//chart x軸下標題文字 labelStep='n' 文字每隔幾個一顯示
// chart x軸 上的柱頂部固定的文字值 rotateValues='1' 垂直顯示
// set alpha = '50' 透明度爲50%
// set dashed='1' 虛線狀態顯示
// set 對於Line anchorSides='7' 顯示的點爲幾邊形 anchorRadius = '4' 形狀大小
// set anchorBorderColor='A186BE' 點 的邊框顏色 anchorBgColor='8BBA00' 點的背景色
// set 中如果沒有value屬性 還是留有空間 只是沒顯示 空元素
// chart connectNullData='1' 對於Line,跳過空元素直接與下一個節點連接
// lineDashGap='6' 虛線顯示空元素的連接 需要程序處理上一個節點爲dashed='1'
// chart lineDashGap = '5' 虛線的點的間隔
// chart decimals='2' 小數點後2位數 其他類似 對於數據差距比較很小(最大值最小值最少相差在1之內) 適用
// 如果想讓柱狀的值顯示小數點後一位 forceDecimals='1' (Y軸顯示還是2位或者更多)
// chart formatNumberScale='0' 顯示格式爲 234,344,679
// chart formatNumberScale='0' formatNumber='0' 顯示格式爲原始格式
// chart clickURL='n-http://www.baidu.com' chart點擊打開百度
// chart toolTipBorderColor 提示的邊框顏色 toolTipBgColor 提示的背景色
// chart useRoundEdges = '1' chart展示圓柱狀圖表
// chart exportHandler='fcExporter1' chart指定client-side導出組件
// 導出功能所需要的三件事情： 1 引入FusionChartsExportComponent.js 2 html中添加導出按鈕的div(id = 'xy') 3 並設置相應的屬性 exportAtClient = '1'支持客戶端導出 exportEnabled = '1' 可導出 4 chart指定exportHandler
// chart exportDialogMessage='已導出 ' 設置導出文件的時候百分比進度前的文字
var xx =
"<chart caption = '自定義圖表(點擊倒數第二個&右鍵導出)' bgColor='FF5904,FFFFFF' bgAlpha='100,100' bgRatio='0,100' bgAngle='0'"
+" staggerLines='3' labelDisplay='Stagger' labelStep='1' "
+" rotateValues='1' canvasPadding='0' connectNullData='1' lineDashGap='5'"
+" decimals='2' formatNumberScale='0' formatNumber='0' exportEnabled='1'"
+" toolTipBorderColor='D9E5F1' toolTipBgColor='D9E5F1' showToolTip='1' useRoundEdges='1'"
+" exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' exportDialogMessage='已導出 '>"
+"<set label='John' value='42900' tooltext = '第1個值爲{br}：420'/>"
+"<set label='Const' value='12345' tooltext = '第2一個值爲：295'/>"
+"<set label='Ivy' value='52233' tooltext = '第3個值爲：523' dashed='1'/>"
+"<set label='Pery' />"
+"<set label='Erlang' />"
+"<set label='Chuank' />"
+"<set label='Sprone' value='42000' alpha='50' dashed='1' tooltext = '第1個值爲{br}：420'/>"
+"<set label='July' value='2295' tooltext = '第2一個值爲：295'/>"
+"<set label='Lim' value='52243' tooltext = '第3個值爲：523'/>"
+"<set label='Joli' value='35679' tooltext = '第1個值爲{br}：420'/>"
+"<set label='Boyka' link='JavaScript:myJS(\"Boyka\");' value='68420' tooltext = '第2一個值爲：295'/>"
+"<set label='Abma' link='JavaScript:myJS(\"Abma\");' value='52463' tooltext = '第3個值爲：523'/>"
+"<set label='Lanbo' link='JavaScript:myJS(\"Lanbo\");' value='49990' tooltext = '第1個值爲{br}：420'/>"
+"<set label='Jim' link='newchart-xml-jim-quarterly' value='46999' tooltext = '第2一個值爲：295' color='FF5906' />"
+"<set label='Chelios' value='49900' tooltext = '"+"傑森·斯坦森 主要作品{br}"
+"▪ 巴西任務 ( 2013) ▪ 帕克 ( 2013){br}"
+"▪ 暫告安全 ( 2012) ▪ 玩命追蹤 ( 2012){br}"
+"▪ 波茨坦廣場 ( 2012)▪ 敢死隊2 ( 2012){br}"
+"▪ 鐵血精英 ( 2011) ▪ 機械師 ( 2010){br}"
+"▪ 死亡飛車2 ( 2010)▪ 敢死隊 ( 2010){br}▪ 怒火攻心2 高壓電"+"' color='FF5904' "
+" link='JavaScript:myJS(\"49900\");' anchorRadius='5' anchorSides='6' anchorBorderColor='A186BE' anchorBgColor='8BBA00'/>"
+" <linkeddata id='jim-quarterly'><chart caption='第一層轉向(點擊第二個進入)' subcaption='For the year 2004' xAxisName='中國' yAxisName='GDP'> <set label='Q1' value='11700'/> <set label='Q2' link='newchart-xml-a-quarterly' value='8600'/> <set label='Q3' value='6900' /> <set label='Q4' value='10600' />"
+"<linkeddata id='a-quarterly'><chart caption='第二層轉向' subcaption='浙江年度xx' xAxisName='浙江' yAxisName='GPP'> <set label='Q1' value='80'/> <set label='Q2' value='50'/> <set label='Q3' value='99' /> <set label='Q4' value='90' /> </chart> </linkeddata></chart> </linkeddata>"
+" <styles><style name='MyFirstBlur' type='Blur' blurX='6' blurY='6' /></styles></chart>";
// exportAtClient exportEnabled='1' 加入fcexplorer.js FusionChartsExportComponent.js
// FCExporter.swf 詳細可見Client_side explorting-simple example
// linkeddata 要轉向的圖的數據來源
var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId234", "300", "300");
myChart.setDataXML(xx);
myChart.render("test");
var myExportComponent = new FusionChartsExportObject("fcExporter1", "chart/swf/FCExporter.swf");
myExportComponent.componentAttributes.width = '400';
myExportComponent.componentAttributes.height = '60';
//Background color
myExportComponent.componentAttributes.bgColor = 'ffffdd';
//Border properties
myExportComponent.componentAttributes.borderThickness = '2';
myExportComponent.componentAttributes.borderColor = '0372AB';
//Font properties
myExportComponent.componentAttributes.fontFace = 'Arial';
myExportComponent.componentAttributes.fontColor = '0372AB';
myExportComponent.componentAttributes.fontSize = '9';
myExportComponent.componentAttributes.btnWidth = '30';
myExportComponent.componentAttributes.btnHeight= '20';
myExportComponent.componentAttributes.btnColor = 'E1f5ff';
myExportComponent.componentAttributes.btnBorderColor = '0372AB';
//Button font properties
myExportComponent.componentAttributes.btnFontFace = 'Verdana';
myExportComponent.componentAttributes.btnFontColor = '0372AB';
myExportComponent.componentAttributes.btnFontSize = '15';
myExportComponent.componentAttributes.btnsavetitle = '保存'
myExportComponent.componentAttributes.btndisabledtitle = '導出請點擊右鍵...';
myExportComponent.Render("fce");//
//用configureLink可以指定不行形態的圖表展現, 會替代掉原有的linkeddata
// 如果只有一個的話，可用下面，如果不是一種的話，下面代碼不寫。
/*
FusionCharts("myChartId234").configureLink (
{
swfUrl : "chart/swf/Pie3D.swf",
overlayButton:{
message: '返回',
fontColor : '880000',
bgColor:'FFEEEE',
borderColor: '660000'
}
}, 0);
*/
}
// 激發事件
function myJS(myVar){
window.alert(myVar);
}
$.ajax({
type: "POST",
url: "stat!test.action", //請求的action
success: function(data){ //結果 MSColumn2D MSColumn3D MSLine
var myChart = new FusionCharts("chart/swf/MSColumn2D.swf", "myChartId1", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv1");
myChart = new FusionCharts("chart/swf/MSColumn3D.swf", "myChartId2", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv2");
myChart = new FusionCharts("chart/swf/MSLine.swf", "myChartId3", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3");
myChart = new FusionCharts("chart/swf/MSArea.swf", "myChartId3_1", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_1");
myChart = new FusionCharts("chart/swf/MSCombi2D.swf", "myChartId3_2", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_2");
// 純3D 效果 可轉動
myChart = new FusionCharts("chart/swf/MSColumnLine3D.swf", "myChartId3_3", "350", "350");
myChart.setDataXML(data);
myChart.render("chartDiv3_3");
myChart = new FusionCharts("chart/swf/Marimekko.swf", "myChartId3_4", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_4");
myChart = new FusionCharts("chart/swf/MSCombi3D.swf", "myChartId3_5", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv3_5");
}
});
$.ajax({
type: "POST",
url: "stat!test1.action", //請求的action
success: function(data){ //結果 Column2D Column3D Line Pie3D
var myChart = new FusionCharts("chart/swf/Column2D.swf", "myChartId4", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv4");
myChart = new FusionCharts("chart/swf/Column3D.swf", "myChartId4", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv5");
myChart = new FusionCharts("chart/swf/Line.swf", "myChartId6", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv6");
myChart = new FusionCharts("chart/swf/Pie2D.swf", "myChartId7", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv7");
myChart = new FusionCharts("chart/swf/Pie3D.swf", "myChartId8", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv8");
//////////////// 其他效果
myChart = new FusionCharts("chart/swf/SSGrid.swf", "myChartId9", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv9");
// 概率圖2D
myChart = new FusionCharts("chart/swf/Pareto2D.swf", "myChartId10", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv10");
// 概率圖3D
myChart = new FusionCharts("chart/swf/Pareto3D.swf", "myChartId11", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv11");
myChart = new FusionCharts("chart/swf/Doughnut2D.swf", "myChartId12", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv12");
myChart = new FusionCharts("chart/swf/Doughnut3D.swf", "myChartId13", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv13");
myChart = new FusionCharts("chart/swf/Area2D.swf", "myChartId14", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv14");
myChart = new FusionCharts("chart/swf/Bar2D.swf", "myChartId15", "300", "300");
myChart.setDataXML(data);
myChart.render("chartDiv15");
}
});
</script>
</head>
<body>
<table>
<tr>
<td><div id = "chartDiv1"></div></td>
<td><div id = "chartDiv2"></div></td>
<td><div id = "chartDiv3"></div></td>
</tr>
<tr>
<td><div id = "chartDiv3_1"></div></td>
<td><div id = "chartDiv3_2"></div></td>
<td><div id = "chartDiv3_3"></div></td>
</tr>
<tr>
<td><div id = "chartDiv3_4"></div></td>
<td><div id = "chartDiv3_5"></div></td>
<td><div id = "test"></div><div id = "fce"></div></td>
</tr>
<!-- 下面是單列的圖表 -->
<tr>
<td><div id = "chartDiv4"></div></td>
<td><div id = "chartDiv5"></div></td>
<td><div id = "chartDiv6"></div></td>
</tr>
<tr>
<td><div id = "chartDiv7"></div></td>
<td><div id = "chartDiv8"></div></td>
<td><div id = "chartDiv9"></div></td>
</tr>
<tr>
<td><div id = "chartDiv10"></div></td>
<td><div id = "chartDiv11"></div></td>
<td><div id = "chartDiv12"></div></td>
</tr>
<tr>
<td><div id = "chartDiv13"></div></td>
<td><div id = "chartDiv14"></div></td>
<td><div id = "chartDiv15"></div></td>
</tr>
</table>
</body>
</html>chart.zip