グラフを描く：Chart.js

ページ内に表やグラフを埋め込む方法をいくつか見ていて、こんなことを尋ねてみた。例として使われているのは、過去10年間の東京都の人口推移。

Ｑ）javascriptを使って、htmlだけでページ内に動的なコンテンツを載せる方法を求めています。たとえば、表形式の入力欄が設けてあり、そこに数字を入れることでグラフが自動的に描画されるようなものは可能ですか？

はい、JavaScriptを使用して、HTML内に動的なコンテンツを作成し、入力されたデータに基づいてグラフを自動的に描画することは可能です。ここでは、ユーザーが表形式でデータを入力し、それに基づいてChart.jsを使ってグラフを描画する例を示します。

以下のHTMLコードでは、ユーザーが入力したデータに基づいてグラフを動的に更新する方法を示します。

（実際に示してくれたhtmlは省略。）

説明

1. HTML構造:

   • <table>タグ内に入力欄（<input>タグ）を設置し、ユーザーが年と人口データを入力できるようにします。
   • <button onclick="updateChart()">グラフを更新</button>で、入力データに基づいてグラフを更新するボタンを設置します。
   • <canvas id="chart" width="400" height="200"></canvas>で、Chart.jsのチャートを表示するためのキャンバスを設置します。

2. JavaScriptのコード:

   • var ctx = document.getElementById('chart').getContext('2d');で、キャンバスのコンテキストを取得します。
   • var chartConfigで、Chart.jsの設定を定義します。
   • var myChart = new Chart(ctx, chartConfig);で、Chart.jsを使用してチャートを初期化します。
   • function updateChart()で、表から入力データを取得し、Chart.jsのデータを更新して再描画します。

3. 初期化:

   • ページロード時にupdateChart()が呼び出され、初期データに基づいてグラフが描画されます。

このコードを使用すると、ユーザーが表形式でデータを入力し、ボタンをクリックしてグラフを動的に更新することができます。

知ってる人には少しも珍しくないものだろうし、これまた私の人生において何かの役に立つのか、という気もするが、実際に作ってみるとちょっと楽しい。
但し、ローカルファイルとして保存したものは人口の数字を変更して「グラフを更新」とすればグラフに反映するが、ここに貼ったものはそのようにはならない。そのへん、また機会があったらトライしてみようと思う。

動的なデータ入力とグラフ描画

年	人口

グラフを更新