1.Chart.jsを読み込む

CDNサーバからスクリプト「Chart.js」を読み込みます。
具体的には、グラフを描きたいWebページのHTMLソース中に以下の1行を加えるだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

2.canvas要素を記述

グラフを掲載したい場所に、canvas要素を使って下記のように1行を記述するだけです。
idは他と重複しない名前をつけます。

<canvas id="ChartDemo" height="450" width="600"></canvas>

3.グラフの描画内容をscript要素内に記述

<script>
   描画内容の指示（下記に記述例があります）
</script>

描画内容の指示（以下のようなグラフの例）
・折れ線グラフです。
・X軸には、Item1～Item7の項目があります。
・値は、Item1から順に10, 11, 12, 13, 14, 15, 16です。
・オプションで、Y軸を0～100に固定しています。


var ctx = document.getElementById("ChartDemo").getContext('2d');
var ChartDemo = new Chart(ctx, {
　　// 作成するグラフの種類
　　type: 'line',
　　data: {
　　// ラベルとデータセットを設定
　　　　labels: ["Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7"],
　　　　datasets: [
　　　　　　{
　　　　　　　　label: "Chart-1",
　　　　　　　　borderColor: 'rgb(255, 0, 0)',
　　　　　　　　data: [10, 11, 12, 13, 14, 15, 16],
　　　　　　},
　　　　]
　　},
　　// オプション設定
　　options: {
　　　　scales: {
　　　　　　yAxes: [
　　　　　　　　{
　　　　　　　　　　ticks: {
　　　　　　　　　　　　beginAtZero: true,
　　　　　　　　　　　　min: 0,
　　　　　　　　　　　　max: 100
　　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}
　　}
});

感想

簡単ですね、すごい！
オプション指定で色々できそうです。
今は便利なライブラリが色々あるんですねー。

自己紹介

プログラマー歴7年、ブランク10年のアラフォー主婦です。
記事中に間違っていることがあったら、どんどんつっこんで頂けると嬉しいです。