一.FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。采用xml作为图表的数据。
1. 下载:http://www.fusioncharts.com/Free/
2. 安装:Installation of FusionCharts Free for your web application is just a two-step affair:
1. Create a folder named FusionCharts in the root of your application (though, it's not mandatory to name the folder as FusionCharts or create it under root folder. However, it organizes things a lot more, as all the pages within your website can now access the common set of charts).
2. Copy all the SWF files from Download Package > Charts Folder and paste it in this folder.
建一个文件包,将所有的swf文件copy到其中,还有一个FusionCharts.js
Installation Complete - Yes, there's no more step involved - you're now ready to use FusionCharts in your web application, which will soon see.
3.使用:
<HTML>
<HEAD>
<TITLE>FusionCharts Free & JavaScript - Updating chart using updateChartXML() Method</TITLE>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
/*
* updateChart method is called, when user clicks the button
* Here, we generate the XML data again and build the chart.
* @param domId domId of the Chart
*/
function updateChart(domId){
//using updateChartXML method defined in FusionCharts.js
updateChartXML(domId,"<graph><set name='A' value='32' /></graph>");
//Disable the button
this.document.frmUpdate.btnUpdate.disabled = true;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h2>FusionCharts Free & JavaScript - Updating chart using updateChartXML() method</h2>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "1"); //引用生成的图表样式
chart1.setDataXML("<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD 8F 8' /></graph>"); //设置xml数据
chart1.render("chart1div");
</script>
<BR />
<form name='frmUpdate'>
<input type='button' value='Change Data' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate' />
</form>
</CENTER>
</BODY>
</HTML>
<div id="chart1div"> This text is replaced by the chart. </div> <script type="text/javascript"> var chart1 = new FusionCharts("Column2D.swf", "ChId1", "600", "400", "0", "0"); chart1.setDataURL("Data.xml"); chart1.render("chart1div"); </script>
二.Open Flash Chart - Open Flash Chart 是一个 Flash 图表组件,很容易安装,提供以下语言的API: PHP, Perl, Python, Java, Ruby on Rails, and .Net 来控制图表。
下载:http://teethgrinder.co.uk/open-flash-chart/
可参考:http://crabdave.javaeye.com/blog/189653