FusionChart 就不用介绍了把,一款支持多种语言的图表生成控件,生成的图表丰富,美观,且有动态感,因为它生存的东西就是一个flash。一下介绍一下它的javascript 实现方式把。
废话少说,直接上实例
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript" SRC="js/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//数据
var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/><set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";
/**//*
* 当用户单击按钮时调用这个方法。
* 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。
*/
function updateChart(chartSWF){
//Create another instance of the chart.
var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("functionchart/Column3D.swf", "chart1Id", "400", "300", "0", "0");
chart1.setDataXML(strXML);
chart1.render("chart1div");
</script>
<form name='frmUpdate'>
Show as:
<input type='button' value='Column' onClick="javaScript:updateChart('functionchart/Column3D.swf');" name='btnColumn' />
<input type='button' value='Line' onClick="javaScript:updateChart('functionchart/Line.swf');" name='btnLine' />
<input type='button' value='Pie' onClick="javaScript:updateChart('functionchart/Pie3D.swf');" name='btnPie' />
</form>
</CENTER>
</BODY>
</HTML>
以上是从晚上找的一个简单的实现原理,具体的可在根据自己的情况在调整