网络访谈

jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】       这篇文章主要介绍了jQuery插件FusionCharts实现的Marimekko图效果,结合实例形式分析了jQuery使用FusionCharts插件结合xml数据绘制Marimekko图的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了jQuery插件FusionCharts实现的Marimekko图效果。分享给大家供大家参考，具体如下：

<文件：

 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"TR/html4/loose.dtd" 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 title FusionCharts Marimekko图 /title 
 script type="text/javascript" src="jquery-1.7.2.min.js" /script 
 script type="text/javascript" src="FusionCharts/FusionCharts.js" /script 
 script type="text/javascript" 
$(function(){
 var marimekko = new FusionCharts( "FusionCharts/Marimekko.swf", "marimekkoId", "100%", "540", "0" );
 marimekko.setXMLUrl("marimekko.xml");
 marimekko.render("marimekkoChart");
 /script 
 /head 
 body 
 div id="marimekkoChart" /div 
 /body 
 /html 

2、Marimekko数据源 marimekko.xml：

 xml version="1.0" encoding="UTF-8" 
 chart showValues="0" caption="(统计)年销量" subCaption="2013" xAxisName="月份" yAxisName="销量"
 legendCaption="" baseFont='微软雅黑' baseFontSize='24' baseFontColor='#00FF00'
 outCnvBaseFont='微软雅黑' outCnvBaseFontSize='20' outCnvBaseFontColor='#0000FF' 
 categories 
 category label="一月"/ 
 category label="二月"/ 
 category label="三月"/ 
 category label="四月"/ 
 category label="五月"/ 
 category label="六月"/ 
 category label="七月"/ 
 category label="八月"/ 
 category label="九月"/ 
 category label="十月"/ 
 category label="十一月"/ 
 category label="十二月"/ 
 /categories 
 dataset seriesName="苹果" 
 set value="335000"/ 
 set value="225100"/ 
 set value="164200"/ 
 set value="335000"/ 
 set value="225100"/ 
 set value="164200"/ 
 set value="335000"/ 
 set value="225100"/ 
 set value="164200"/ 
 set value="335000"/ 
 set value="225100"/ 
 set value="164200"/ 
 /dataset 
 dataset seriesName="梨子" 
 set value="215000"/ 
 set value="198000"/ 
 set value="120000"/ 
 set value="215000"/ 
 set value="198000"/ 
 set value="120000"/ 
 set value="215000"/ 
 set value="198000"/ 
 set value="120000"/ 
 set value="215000"/ 
 set value="198000"/ 
 set value="120000"/ 
 /dataset 
 dataset seriesName="橘子" 
 set value="298000"/ 
 set value="109300"/ 
 set value="153600"/ 
 set value="298000"/ 
 set value="109300"/ 
 set value="153600"/ 
 set value="298000"/ 
 set value="109300"/ 
 set value="153600"/ 
 set value="298000"/ 
 set value="109300"/ 
 set value="153600"/ 
 /dataset 
 /chart 

3、运行结果：

附：完整实例代码点击此处。

注：该源码需要放到服务器环境下运行！否则无法加载xml文件数据。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。