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

この記事では、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. 完全なサンプルコード:

<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>
<style type="text/css">
  body{
    width:98%;
    height:100%;
    font-size:12px;
  }
  #bar2DChart{
    width:100%;
  }
</style>
<script type="text/javascript">
$(function(){
 var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" );
 bar2D.setXMLUrl("bar2D.xml");
 bar2D.render("bar2DChart");
});
</script>


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

4. ランニング効果図:

関連する推奨事項:

FusionChar ts 3D 二重棒グラフ

FusionCharts 2D 棒グラフと折れ線グラフの組み合わせグラフ

php チャート fusioncharts の使用例

以上がjQueryプラグインFusionChartsで描画した2D棒グラフの効果を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。