jQuery円グラフ開発例_jquery-jsチュートリアル-php.cn

jQuery円グラフ開発例_jquery

WBOY

リリース： 2016-05-16 16:22:16

オリジナル

1857 人が閲覧しました

この記事の例では、jQuery 円グラフの開発方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ここでは、HTML5 Canvas と jQuery をベースにした円グラフ circliful を紹介します。画像を使わずに簡単に円グラフを実装でき、属性設定も豊富で非常に便利です。使用。レンダリングは次のとおりです:

まず、jquery ライブラリファイルと jquery.circliful.min.js をページに導入する必要があります。

コードをコピーしますコードは次のとおりです:

<スクリプト src="js/jquery-1.10.2.min.js">
<スクリプト src="js/jquery.circliful.min.js">

必要な Jquery ファイルを導入したら、円グラフの基本スタイルをカスタマイズできます。

コードをコピーしますコードは次のとおりです:

<スタイル>

.circliful { 

位置: 相対的;
}

.circle-text、.circle-info、.circle-text-half、.circle-info-half { 

幅: 100%;
位置: 絶対;
テキストの配置: 中央; 

表示: インラインブロック 

}

.circle-info、.circle-info-half { 

色: #999;
}

.circliful .fa { 

マージン: -10px 3px 0 3px;
位置: 相対的;
下: 4px;
}

最初にスタイルを定義した後は、統計グラフが必要な場所に次のスタイル コードを追加するだけです: 

コードをコピーします

コードは次のとおりです:

data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd">

エリアブロックを埋めたら、それを初期化する必要があります:

コードをコピーします

コードは次のとおりです:

<スクリプト> $(document).ready(function() { $('#myStat').circliful(); });

とても簡単で、数回クリックするだけで美しい統計グラフを完成させることができます。

以下はプラグインの基本的な属性の説明です:

Circliful は、html5 の data 属性に基づいた豊富な属性オプションのセットを提供します。以下は設定リストです。

パラメータ	説明	デフォルト値
データ次元	円形画像の幅と高さは px です	250
データテキスト	サークル内に表示されるテキストコンテンツ	空
データ情報	データテキストの下に表示される説明情報	空
データ幅	円の太さ px	15
データフォントサイズ	円の文字サイズ px	15
データパーセント	サークル統計パーセンテージ、1 ～ 100	50
データ-fgcolor	円の前景色	#556b2f
データ-bgcolor	サークルの背景色	#eeeeee
データ入力	円形の塗りつぶしの背景色	空
データ型	サークル統計タイプ。「ハーフ」または「フル」にすることができます	満員
データ合計	データ部分と組み合わせて使用されるデータの総量	空
データ部分	データ量、データ合計と組み合わせて使用されます	空
データボーダー	円形スタイル。インラインやアウトラインなどの境界線を追加できます	空
データアイコン	Fontawesome アイコンスタイル、詳細については、Fontawesome Web サイト – アイコンを参照してください	空
データアイコンサイズ	アイコンのサイズ	空
データアイコンの色	アイコンの色	空

この記事が皆さんの jQuery プログラミングに役立つことを願っています。