ホームページ > ウェブフロントエンド > jsチュートリアル > chart.jsを開始する:はじめに

chart.jsを開始する:はじめに

Lisa Kudrow
リリース: 2025-03-16 11:12:13
オリジナル
575 人が閲覧しました

chart.jsを開始する:はじめに

テキストまたはテーブルとして提示されているかどうかにかかわらず、生データは消化するのが難しい場合があります。 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート