続・グラフ描画　JavaScript

ICT

　グラフ描画の続き。
　ブラウザ上にグラフ描画。

　ブラウザ上に何か描画したい時、JavaScriptを使うことになるが、
　いろいろライブラリがある。

スポンサーリンク

Chart.js

　広く紹介されているグラフ描画ライブラリがChart.js。

Chart.js（www.chartjs.org/）

　まずヘッダーの中でライブラリの読み込み。

<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

　上はCDN指定。

　使用したデータは日本銀行ＨＰから為替レート。
　　日本銀行　時系列統計データ検索サイト　主要時系列統計データ表　為替相場（東京インターバンク相場）（月次）の「月末」の暦年年末（12月）の値（www.stat-search.boj.or.jp/ssi/mtshtml/fm08_m_1.html）

　とりあえず折れ線グラフ（line）を表示する最低限のソースコード

<body>
<canvas id = "chart2"></canvas>

<script>
const cg = document.getElementById("chart2");
const ctx = cg.getContext("2d");

var data1 = {
     labels: [1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025],
     datasets: [{
          label: "1＄",
          data: [203.60,220.25,235.30,232.00,251.58,200.60,160.10,122.00,125.90,143.40,135.40,125.25,124.65,111.89,99.83,102.91,115.98,129.92,115.20,102.08,114.90,131.47,119.37,106.97,103.78,117.48,118.92,113.12,90.28,92.13,81.51,77.57,86.32,105.37,119.80,120.42,117.11,112.65,110.4,109.15,103.33,115.12,132.14,141.4,157.89,155.98],
          borderColor:'rgba(0,0,255,1)',
}]
};

const linechart = new Chart(ctx, {
     type: 'line',
     data: data1
});
</script>
</body>

グラフ描画　　　→
　※　指定ライブラリはCDNではなく古いバージョンのChart.bundle.js
　　　CDNのchart.js指定でＸ軸、Ｙ軸の軸名表示

　Ｘ軸、Ｙ軸はoptionsで。

　Chart.jsはHTML5　Canvasに描画。

スポンサーリンク

C3.js

　短いコードで済むのがC3.js（c3js.org/）というライブラリ。
　CanvasではなくSVG描画。
　D3.js（d3js.org/）というライブラリが必要になるが、読み込むだけ。

<head>
<script type="text/javascript" src="../d3.min.js"></script>
<script type="text/javascript" src="../c3.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../c3.min.css">

<script type="text/javascript" src="../jquery.min.js"></script>
</head>

　※　JQueryも読み込み

　折れ線グラフを表示する最低限のコード

<body>
<div id = "chart3"></div>

<script>
$(function(){
var chart = c3.generate({
bindto: '#chart3',
size: {width:800},
data: {
columns: [
['year',1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025],
['data1',203.60,220.25,235.30,232.00,251.58,200.60,160.10,122.00,125.90,143.40,135.40,125.25,124.65,111.89,99.83,102.91,115.98,129.92,115.20,102.08,114.90,131.47,119.37,106.97,103.78,117.48,118.92,113.12,90.28,92.13,81.51,77.57,86.32,105.37,119.80,120.42,117.11,112.65,110.4,109.15,103.33,115.12,132.14,141.4,157.89,155.98]
],
//type: 'line',
x:'year',
names: {
data1: '1＄',
}
}
})
</script>
</body>

グラフ描画　　　→

スポンサーリンク
mitsumatado