テキストまたはテーブルとして提示されているかどうかにかかわらず、生データは消化するのが難しい場合があります。 Chart.jsは、データを視覚化することにより、魅力的なソリューションを提供し、複雑な情報を理解しやすくします。
世界の最も人口の多い10か国を示すこの表を考えてみましょう。(説明されているchart.jsの機能に直接関係していないため、簡潔にするために省略されたテーブルの例)。
chart.jsを使用するには、それをインストールすることから始めます。
npmインストールchart.js - save
chart.jsは以前にbundled momem.jsですが、これはもはやそうではありません。タイムスケールチャートの場合、日付アダプター(日付FNSなど)と対応するライブラリが必要です。 Date-FNSは、より簡単なアプリケーション用の軽量オプションです。この例では、Date-FNSを使用して、Legendのフォントをカスタマイズします。
var barchart = new Chart(popcanvas、{ タイプ: 'bar'、 データ:データ、 オプション:{ プラグイン:{ 伝説: { ディスプレイ:本当、 位置:「ボトム」、 ラベル:{ BoxWidth:50、 色:「黒」、 フォント:{ サイズ:24、 重量:「太字」 } } } } } });
Chart.jsでは、ツールチップを粒状制御できます。 Chart.defaults.plugins.tooltip
グローバルなツールチップスタイルを設定し、個々のチャートオプションはさらにカスタマイズされています。この例では、カスタマイズフォント、パディング、矢印のサイズ、背景を示しています。
オプション:{ プラグイン:{ 伝説: { ディスプレイ:本当、 位置:「ボトム」、 ラベル:{ BoxWidth:50、 色:「黒」、 フォント:{ サイズ:24、 重量:「太字」 } } }、 ツールチップ:{ CornerRadius:0、 CARETSIZE:0、 パディング:10、 BackgroundColor:「黒」、 bordercolor:「グレー」、 境界幅:5、 titlemarginbottom:4、 titlefont:{ 「重量」:「太字」、 「サイズ」:22 } } } }
caretSize
を0に設定すると、ツールチップ矢印が隠されています。次のデモは、これらのカスタマイズされたツールチップを紹介します。
結論:
chart.jsのこの紹介は、バーチャートの作成とカスタマイズを実証しました。表示されている構成オプションは、さまざまなチャートタイプに適用できます。将来のチュートリアルは、ラインチャートとバーチャートを深く掘り下げます。 Chart.jsは、JavaScript Web開発内のデータ視覚化のための強力なツールです。 (注:引用された人口データソース)。
以上がchart.jsを開始する:はじめにの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。