ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryプラグインFusionChartsで描画した2D棒グラフの効果を共有する

jQueryプラグインFusionChartsで描画した2D棒グラフの効果を共有する

小云云オリジナル: 2018-01-12 09:37:421674ブラウズ

この記事では、jQuery プラグイン FusionCharts によって描画される 2D 棒グラフの効果を主に紹介し、FusionCharts プラグインを使用して 2D 棒グラフを描画するための jQuery の具体的な手順と関連する操作テクニックを完全な例の形式で分析します。必要に応じて読者が参照用にダウンロードできるデモソースコードも付属しています。これが皆さんのお役に立てれば幸いです。

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. ランニング効果図:

jQueryプラグインFusionChartsで描画した2D棒グラフの効果を共有する

関連記事