2020年3月

素材

【無料素材】ウイルス関連アイコン

ポスターや掲示物、ホームページのお知らせに アイコン職人の仕事が早く、すでにウイルス関連のアイコンが多数公開されています。 会社やお店のポスターにすぐ無料で使えるアイコンをいくつか紹介します。 あの「家でプレステしてろ」も入ってるアイコン ダウンロードはこちらから 疑惑のコウモリからセンザンコウまで ダウンロードはこちらから 人との距離は1m離れて ダウンロードはこちらから

JS

【制作時間の目安 : 5分】Chart.jsを使って折れ線グラフを描いてみよう

Chart.jsは特に難しい知識不要 グラフ描画ライブラリのChart.jsは、プログラムが書けなくても、JSが分からなくても、Web上にグラフを表示できてしまいます。 お湯を沸かしてカップ麺ができる頃にはグラフが出来上がるくらいの手軽さです。 ちなみに、Chart.jsはオープンソースです。 ライセンスもMITなので、誰でも、どんなサイトにも、商用・非商用問わず無料で利用できます。 今回作りたいグラフ 今回作りたいグラフのサンプルはこちらです。 CDN読み込み Chart.jsを利用するために、まずはCDNを読み込みます。 CDNはhead内に次のように書きます。

または

現時点での最新版の2.9.3を使用しています。 バージョンは各自でご確認を。 CDN使用でなく、ダウンロードして使いたい場合はGitHubにありますので、下記よりダウンロードしてください。 https://github.com/chartjs/Chart.js/releases/tag/v2.9.3 HTMLはcanvasタグでたった1行で完了 HTML本文の、グラフを表示したい場所にはcanvasタグを使用します。

ID名は何でも大丈夫です。 myChartでも、yourChartでも、orenoChartでも、お好きな名前をつけてください。 JS部分 基本的なグラフの書き方

表示結果 見ての通りのデフォルトの特徴は、曲線で、色が塗られています。 (普段は線グラフと言うと、直線でカクカクしたものを想像するので、ベジェ曲線のグラフは違和感があります。) 変数(varの後の部分)はお好きな名前でどうぞ。 ここで2行目の getElementById(‘myChart’); の呼び出しは、HTMLで決めたcanvasの変数です。 その他の変数の名称も適宜そろえてください。 4行目 type: ‘line’ で、グラフの形を決めるのですが、lineは線グラフです。 ちなみに棒グラフは type: ‘bar’ となります。 6行目 labels: [] 内に、横軸のラベル、この例では年をコンマ区切りで入れています。 8行目 label: ‘日本の出生児数の推移’ は、グラフのタイトルです。省略も可です。 9〜10行目 backgroundColor: ‘rgb(255, 99, 132)’ borderColor: ‘rgb(255, […]