jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】

2019-11-19 17:02:36

字体：大中小

来源：转载

供稿：网友

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

1、index.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/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="(VeVB.COm统计)年销量" 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、运行结果：