ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery円グラフ開発例_jquery
この記事の例では、jQuery 円グラフの開発方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
ここでは、HTML5 Canvas と jQuery をベースにした円グラフ circliful を紹介します。画像を使わずに簡単に円グラフを実装でき、属性設定も豊富で非常に便利です。使用。レンダリングは次のとおりです:
まず、jquery ライブラリ ファイルと jquery.circliful.min.js をページに導入する必要があります。
コードは次のとおりです:
コードは次のとおりです:
とても簡単で、数回クリックするだけで美しい統計グラフを完成させることができます。
以下はプラグインの基本的な属性の説明です:
Circliful は、html5 の data 属性に基づいた豊富な属性オプションのセットを提供します。以下は設定リストです。
パラメータ | 説明 | デフォルト値 |
データ次元 | 円形画像の幅と高さは px です | 250 |
データテキスト | サークル内に表示されるテキストコンテンツ | 空 |
データ情報 | データテキストの下に表示される説明情報 | 空 |
データ幅 | 円の太さ px | 15 |
データフォントサイズ | 円の文字サイズ px | 15 |
データパーセント | サークル統計パーセンテージ、1 ~ 100 | 50 |
データ-fgcolor | 円の前景色 | #556b2f |
データ-bgcolor | サークルの背景色 | #eeeeee |
データ入力 | 円形の塗りつぶしの背景色 | 空 |
データ型 | サークル統計タイプ。「ハーフ」または「フル」にすることができます | 満員 |
データ合計 | データ部分と組み合わせて使用されるデータの総量 | 空 |
データ部分 | データ量、データ合計と組み合わせて使用されます | 空 |
データボーダー | 円形スタイル。インラインやアウトラインなどの境界線を追加できます | 空 |
データアイコン | Fontawesome アイコン スタイル、詳細については、Fontawesome Web サイト – アイコンを参照してください | 空 |
データアイコンサイズ | アイコンのサイズ | 空 |
データアイコンの色 | アイコンの色 | 空 |
この記事が皆さんの jQuery プログラミングに役立つことを願っています。