fusioncharts入门系列3之柱状图与折线图

发布时间：2020-12-15 17:48:47 所属栏目：百科来源：网络整理

导读：柱状图代码示例index.html： !DOCTYPE HTMLhtmlbody onload="init();"div id="chartContainer1"/divscript type="text/javascript" src="fusioncharts/FusionCharts.js"/scriptscript type="text/javascript" function init(){ var chart = new FusionCharts

柱状图代码示例index.html：

<!DOCTYPE HTML>
<html>
<body onload="init();">
	<div id="chartContainer1"></div>

	<script  type="text/javascript" src="fusioncharts/FusionCharts.js"></script>
	<script type="text/javascript">
	    function init(){
	        var chart = new FusionCharts("fusioncharts/Column3D.swf","myChartId","500","300","0","1");
	        chart.setDataURL("date2.xml");
	        chart.render("chartContainer1");
	    }
	</script>
</body>
</html>

date2.xml代码：

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
   <set label='Jan' value='17400'/>
   <set label='Feb' value='19800'/>
   <set label='Mar' value='21800'/>
   <set label='Apr' value='23800'/>
   <set label='May' value='29600'/>
   <set label='Jun' value='27600'/>
</chart>

3D柱状图效果：

将html代码中Column3D.swf替换为Line.swf，展示即为折线图。

折线图效果：

如果相关swf文件存在，但替换swf文件后，数据展示失败，则可能是xml中数据格式错误，可先采用文中xml验证swf文件的正确性。若能正常显示，则说明xml数据格式错误；若不能正常显示，则说明是swf文件存在问题，替换为其它版本的swf，再次验证。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!