jQuery插件FusionCharts繪製的2D長條圖效果分享-js教程-PHP中文網

jQuery插件FusionCharts繪製的2D長條圖效果分享

小云云

發布： 2018-01-12 09:37:42

原創

1621 人瀏覽過

本文主要介紹了jQuery插件FusionCharts繪製的2D條狀圖效果,結合完整實例形式分析了jQuery使用FusionCharts插件繪製2D條狀圖的具體步驟與相關操作技巧,並附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助大家。

1、設計想法

（1）了解長條圖的一些特性和共通性，掌握其特性；

（2）根據FusionCharts設計條理，設定靜態頁面和資料來源；

（3）引入長條圖，設定其屬性。

2、設計步驟

（1）設計產生長條圖的腳本

$(function(){
 var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" );
 bar2D.setXMLUrl("bar2D.xml");
 bar2D.render("bar2DChart");
});

登入後複製

（2）設計資料來源

<?xml version="1.0" encoding="UTF-8"?>
<chart caption=&#39;(jb51.net统计)2016年动物饲养量&#39; xAxisName=&#39;动物名称&#39; yAxisName=&#39;饲养量&#39; showValues=&#39;1&#39; baseFontSize=&#39;12&#39; baseFontColor=&#39;#A45454&#39;
    dashed=&#39;1&#39; numpLines=&#39;40&#39; pLineColor=&#39;#0000FF&#39; pLineThickness=&#39;1&#39; pLineAlpha=&#39;50&#39; pLineIsDashed=&#39;1&#39; pLineDashLen=&#39;2&#39;
    formatNumber=&#39;1&#39; scaleRecursively=&#39;1&#39; outCnvBaseFont=&#39;#456454&#39; outCnvBaseFontSize=&#39;16&#39; outCnvBaseFontColor=&#39;#00FF00&#39; showToolTip=&#39;1&#39;
    toolTipBgColor=&#39;#565677&#39; toolTipBorderColor=&#39;#CCCCCC&#39; showToolTipShadow=&#39;1&#39; chartLeftMargin=&#39;5&#39; showLabel=&#39;1&#39;>
  <set label=&#39;猪&#39; value=&#39;9856456454&#39; />
  <set label=&#39;牛&#39; value=&#39;8754545554&#39; />
  <set label=&#39;羊&#39; value=&#39;5784554458&#39; />
  <set label=&#39;兔&#39; value=&#39;451545554&#39; />
  <set label=&#39;鸡&#39; value=&#39;7989565666&#39; />
  <vLine color=&#39;FF5904&#39; thickness=&#39;2&#39; dashed=&#39;1&#39; showLabelBorder=&#39;1&#39; labelVAlign=&#39;middle&#39; labelHAlign=&#39;center&#39;/>
  <set label=&#39;鸭&#39; value=&#39;5613265666&#39; />
  <set label=&#39;鹅&#39; value=&#39;784545555&#39; />
  <set label=&#39;蛇&#39; value=&#39;45412121&#39; />
  <set label=&#39;蛙&#39; value=&#39;656521&#39; />
  <set label=&#39;鱼&#39; value=&#39;7854656666&#39; />
</chart>

登入後複製

（3）引入FusionCharts條狀圖

<p id="bar2DChart"></p>

登入後複製

3、完整實例程式碼：





FusionCharts 2D条状图







  <p id="bar2DChart"></p>

登入後複製

4、執行效果圖：