怎么在jQuery中使用FusionCharts實(shí)現(xiàn)的一個(gè)Marimekko效果

發(fā)布時(shí)間：2021-04-12 16:53:26 來源：億速云閱讀：102 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)怎么在jQuery中使用FusionCharts實(shí)現(xiàn)的一個(gè)Marimekko效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

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數(shù)據(jù)源 marimekko.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart showValues="0" caption="(jb51.net統(tǒng)計(jì))年銷量" 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>

關(guān)于怎么在jQuery中使用FusionCharts實(shí)現(xiàn)的一個(gè)Marimekko效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

怎么在jQuery中使用FusionCharts實(shí)現(xiàn)的一個(gè)Marimekko效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽