JS

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, […]

JS

【JSコピペでOK】黒丸のパスワードをテキストにCSSで表示・非表示を切り替える

パスワードを表示できるようになってきたこの頃 Googleのログイン パスワード入力画面のように、黒丸で表示しているパスワードを、テキストに表示できるサイトが増えてきています。 下図はGoogleのログイン画面ですが、「目」のアイコンをクリックすることで、●●●で表示されているパスワードをテキストで表示してくれます。 「あれ?正しく入力したつもりなのにログインできない」と困ることは少なくなる便利な機能です。 そもそもなぜパスワードは●●●表示なのか パスワードを入力しようとするときに、黒丸の伏せ字で表示されるのはなぜでしょうか? 答えは簡単、隣にいる人、後ろにいる人に見えないようにするためです。 だからこそ、周りに人がいなければテキスト表示をしてもとりわけ問題ないのです。 パスワードをGoogle風にアイコンでテキストに切り替えるための考察 動作サンプルはこちらです。 まずは好みに合わせてお好きなアイコンを用意してください。 オンオフを切り替えるためには、現在がパスワードが伏せ字の状態なのか、テキスト表示されている状態なのかを判別する必要があります。 手っ取り早そうなのが、やはりチェックボックスの機能で、チェック状態とチェックなしの状態を利用したいと思います。 ただ、チェックボックスでは味気ないので、チェックボックスの機能だけ使い、チェックボックスの見た目は隠す方向でいきます。 また、パスワードの伏せ字を表示するにはとても簡単、input type=”password” を “text”にするだけです。 ここではJSのattrで置き換えます。 html

css

js

動作サンプルはこちらです。