ポスターや掲示物、ホームページのお知らせに アイコン職人の仕事が早く、すでにウイルス関連のアイコンが多数公開されています。 会社やお店のポスターにすぐ無料で使えるアイコンをいくつか紹介します。 あの「家でプレステしてろ」も入ってるアイコン ダウンロードはこちらから 疑惑のコウモリからセンザンコウまで ダウンロードはこちらから 人との距離は1m離れて ダウンロードはこちらから
Chart.jsは特に難しい知識不要 グラフ描画ライブラリのChart.jsは、プログラムが書けなくても、JSが分からなくても、Web上にグラフを表示できてしまいます。 お湯を沸かしてカップ麺ができる頃にはグラフが出来上がるくらいの手軽さです。 ちなみに、Chart.jsはオープンソースです。 ライセンスもMITなので、誰でも、どんなサイトにも、商用・非商用問わず無料で利用できます。 今回作りたいグラフ 今回作りたいグラフのサンプルはこちらです。 CDN読み込み Chart.jsを利用するために、まずはCDNを読み込みます。 CDNはhead内に次のように書きます。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> |
または
|
1 |
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> |
現時点での最新版の2.9.3を使用しています。 バージョンは各自でご確認を。 CDN使用でなく、ダウンロードして使いたい場合はGitHubにありますので、下記よりダウンロードしてください。 https://github.com/chartjs/Chart.js/releases/tag/v2.9.3 HTMLはcanvasタグでたった１行で完了 HTML本文の、グラフを表示したい場所にはcanvasタグを使用します。
|
1 |
<canvas id="myChart"></canvas> |
ID名は何でも大丈夫です。 myChartでも、yourChartでも、orenoChartでも、お好きな名前をつけてください。 JS部分 基本的なグラフの書き方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> var myData = document.getElementById('myChart'); var chart = new Chart(myData, { type: 'line', data: { labels: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018'], datasets: [{ label: '日本の出生児数の推移', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [1073663, 1046825, 1044983, 1022371, 1025105, 1004068, 965289, 944146] }] } }); </script> |
表示結果 見ての通りのデフォルトの特徴は、曲線で、色が塗られています。 （普段は線グラフと言うと、直線でカクカクしたものを想像するので、ベジェ曲線のグラフは違和感があります。） 変数（varの後の部分）はお好きな名前でどうぞ。 ここで２行目の getElementById(‘myChart’); の呼び出しは、HTMLで決めたcanvasの変数です。 その他の変数の名称も適宜そろえてください。 ４行目 type: ‘line’ で、グラフの形を決めるのですが、lineは線グラフです。 ちなみに棒グラフは type: ‘bar’ となります。 ６行目 labels: [] 内に、横軸のラベル、この例では年をコンマ区切りで入れています。 ８行目 label: ‘日本の出生児数の推移’ は、グラフのタイトルです。省略も可です。 ９〜10行目 backgroundColor: ‘rgb(255, 99, 132)’ borderColor: ‘rgb(255, […]