jQuery插件FusionCharts實現的Marimekko圖效果示例【附demo源碼】

更新時間：2017年03月24日 14:33:13 作者：翱翔天地

這篇文章主要介紹了jQuery插件FusionCharts實現的Marimekko圖效果,結合實例形式分析了jQuery使用FusionCharts插件結合xml數據繪制Marimekko圖的相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了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="(jb51.net統(tǒng)計)年銷量" 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、運行結果：

附：完整實例代碼點擊此處本站下載。

注：該源碼需要放到服務器環(huán)境下運行！否則無法加載xml文件數據。

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

(jQuery,mootools,dojo)使用適合自己的編程別名命名
我們經常用一些別名方法來使用自己喜歡的js 庫。學習javascript的朋友可以參考下。
2010-09-09
基于jQuery實現一個marquee無縫滾動的插件
這篇文章主要介紹了基于jQuery實現一個marquee無縫滾動的插件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
jQuery學習筆記更改jQuery對象
jQuery提供了一些方法，使流程變?yōu)樯蒵Query對象A，操作jQuery對象A；更改為jQuery對象B，操作jQuery對象B
2012-09-09
jQuery 實現DOM元素拖拽交換位置的實例代碼
這篇文章主要介紹了jQuery 實現DOM元素拖拽交換位置，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-07-07
JQuery 文本框使用小結
JQuery 文本框使用小結，主要是事件的綁定，結合下js的用法。
2010-05-05
jQuery實現的頁面彈幕效果【測試可用】
這篇文章主要介紹了jQuery實現的頁面彈幕效果,涉及jQuery事件響應與頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下
2018-08-08
jquery實現手風琴案例
這篇文章主要為大家詳細介紹了jquery實現手風琴案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
jquery中判斷圖片是否存在的實現代碼
有時候我們需要判斷當前的圖片是否存在，方便后期做一些操作，當然也可以參考上一篇文章，如果不存在就替換位默認圖片
2023-06-06
jquery下實現overlay遮罩層代碼
下面是個應用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換，當ajax出錯時提示用戶
2010-08-08
jQuery實現區(qū)域打印功能代碼詳解
這篇文章主要介紹了jQuery實現區(qū)域打印功能代碼詳解的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06