Bing: はい、あります。JavaScriptとSVGを使って折れ線グラフを書く方法はいくつかありますが、ここでは3つの例を紹介します。
どの方法がお好みですか？
Bing: morris.jsを使って動的な折れ線グラフを作るサンプルコードを作成することができます。以下の手順に従ってください。
morris.jsは、raphaelとjqueryに依存しているため、HTMLファイルのheadタグ内に以下のスクリプトタグを追加します1。
<script src="[<https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js>](<https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js>)"></script>
<script src="[<https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js>](<https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js>)"></script>
<script src="[<https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js>](<https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js>)"></script>
出力先に、divタグを設置します。id名と出力するグラフの高さを入力します1。
<div id="line-chart" style="height: 250px;"></div>
グラフの出力内容を記述します。JavaScriptファイルまたはHTMLファイルのscriptタグ内に以下のコードを追加します1。
// グラフのデータを定義する
var data = [
{ y: '2016', a: 100, b: 90 },
{ y: '2017', a: 75, b: 65 },
{ y: '2018', a: 50, b: 40 },
{ y: '2019', a: 75, b: 65 },
{ y: '2020', a: 50, b: 40 },
{ y: '2021', a: 75, b: 65 },
{ y: '2022', a: 100, b: 90 }
];
// グラフのオプションを定義する
var options = {
element: 'line-chart', // 出力先のdivタグのid名
data: data, // グラフのデータ
xkey: 'y', // x軸に対応するデータのキー
ykeys: ['a', 'b'], // y軸に対応するデータのキー
labels: ['Series A', 'Series B'], // データのラベル
resize: true // ウィンドウサイズに応じてグラフサイズを変更するかどうか
};
// グラフを描画する
var lineChart = new Morris.Line(options);
HTMLファイルをブラウザで開くと、以下のような折れ線グラフが表示されます。
これでサンプルコードの作成は完了です。もし、グラフの見た目や動作を変更したい場合は、morris.jsのドキュメント を参照してください。
Bing: 動的に値を追加する場合は、morris.jsのsetDataメソッドを使って、グラフに新しいデータをセットすることができます1。例えば、以下のようにします。
// 新しいデータを定義する
var newData = [
{ y: '2016', a: 80, b: 70 },
{ y: '2017', a: 60, b: 50 },
{ y: '2018', a: 40, b: 30 },
{ y: '2019', a: 60, b: 50 },
{ y: '2020', a: 40, b: 30 },
{ y: '2021', a: 60, b: 50 },
{ y: '2022', a: 80, b: 70 }
];
// グラフに新しいデータをセットする
lineChart.setData(newData);
これでグラフが以下のように更新されます。