您的位置：首页 > 其它

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

2013-12-10 23:18 381 查看
柱状图代码示例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，再次验证。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航