このチュートリアルは、以前のchart.jsレッスンで展開されており、ラインチャートとバーチャートをカバーしています。ここでは、レーダーと極地の領域チャートを調べて、簡潔な概要と詳細な説明を提供します。
レーダーチャートの理解
ラインチャートとバーチャートは、多数のデータポイント(アジア諸国の人口など)にわたって1つまたは2つの属性を比較することに優れています。ただし、少数のデータポイント(3つの液体のプロパティなど)のみの多くの属性を比較すると、レーダーチャートがはるかに効果的です。スパイダーチャートとも呼ばれ、複数の変数を効率的に視覚化および比較します。
Wikipediaで定義されているように、レーダーチャートは、中央ポイントからの軸を使用して多変量データをグラフィカルに表します。軸の角度と相対位置は一般に有意ではありません。
最初のレーダーチャートを作成しましょう。 「r」を「x」または「angle」キー内のスケールキーとして「false」に設定することにより、これを達成します。同様に、回転アニメーションの無効化は、「アニメーター」オブジェクト内で「アニメーターテート」を「false」に設定することによって行われます。
次のコードは、チャートの視覚的な魅力を強化します。
var chartoptions = { プラグイン:{ タイトル: { ディスプレイ:本当、 位置:「ボトム」、 テキスト:「さまざまな季節の渡り鳥」 }、 伝説: { アライメント:「センター」、 ポジション:「左」、 ラベル:{ フォント:{ サイズ:16 } } } }、 アニメーション:{ アニメーターテート:偽 }、 スケール:{ R:{ ティック:{ フォント:{ サイズ:16 }、 色:「白」、 backdropcolor:「黒」 } } }、 要素:{ アーク:{ 角度:180、 bordercolor:「黒」 } } };
アニメーションコントロールを超えて、伝説を左に再配置し、チャートの読みやすさを向上させました。
結論
このチュートリアルでは、レーダーと極地の領域チャートの実用的なアプリケーションと、chart.jsの構成オプションを使用してそれらを作成およびカスタマイズする方法を示しました。将来のチュートリアルでは、パイ、ドーナツ、バブルチャートについて説明します。さらにJavaScriptリソースとフレームワークについては、Envato Marketを探索してください。
以上がchart.js:レーダーと極地の領域チャートを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。