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 サイトの他の関連記事を参照してください。