jQuery円グラフ開発例_jquery

WBOY
WBOYオリジナル
2016-05-16 16:22:161871ブラウズ

この記事の例では、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; }




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





コードをコピーします

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





コードをコピーします

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

<スクリプト> $(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 プログラミングに役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。