怎么在jQuery中使用FusionCharts插件繪制一個(gè)2D雙柱狀圖?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
我們提供的服務(wù)有:成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、安福ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的安福網(wǎng)站制作公司
1、FusionCharts中的2D雙柱狀圖頁(yè)面
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 2D雙柱狀圖</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 column2D = new FusionCharts( "FusionCharts/MSColumn2D.swf", "myChartId", "100%", "520", "0" ); column2D.setXMLUrl("doubleColumn2D.xml"); column2D.render("doubleColumn2DChart"); }); </script> </head> <body> <div id="doubleColumn2DChart"></div> </body> </html>
2、數(shù)據(jù)源
doubleColumn2D.xml:
<?xml version="1.0" encoding="UTF-8"?> <chart caption='(jb51.net統(tǒng)計(jì))2015年和2016年統(tǒng)計(jì)收入' xAxisName='月份' yAxisName='收入' showValues='0' baseFont='微軟雅黑' baseFontSize='14' baseFontColor='#00FF00' outCnvBaseFont='宋體' outCnvBaseFontSize='16' outCnvBaseFontColor='#798777' showAboutMenuItem='1' showLabels='1' labelDisplay='ROTATE ' useEllipsesWhenOverflow='1' rotateLabels='1' slantLabels='1' staggerLines='2' labelStep='3' placeValuesInside='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' showShadow='1' adjustDiv='1' setAdaptiveYMin='1' centerYaxisName='1' useRoundEdges='1' numDivLines='8' divLineColor='#987989' divLineIsDashed='1'> <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='2015'> <set value='45155' /> <set value='12452'/> <set value='63455' /> <set value='45233' /> <set value='95656' /> <set value='87545' /> <set value='12425' /> <set value='94633' /> <set value='85452' /> <set value='75455' /> <set value='32312' /> <set value='65625' /> </dataset> <dataset seriesName='2016'> <set value='65655'/> <set value='74555'/> <set value='61245'/> <set value='12451'/> <set value='95656' /> <set value='24655' /> <set value='45122' /> <set value='32656' /> <set value='65656' /> <set value='95666' /> <set value='65323' /> <set value='54656' /> </dataset> </chart>
3、運(yùn)行結(jié)果圖:
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)的支持。
本文題目:怎么在jQuery中使用FusionCharts插件繪制一個(gè)2D雙柱狀圖
網(wǎng)頁(yè)地址:http://bm7419.com/article34/gejhpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站排名、Google、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)