ブラウザで２つのグラフを縦に並べたい

前提・実現したいこと

2つのグラフを縦に並べたいです。
下記の書き方だと2つ目のgraph2のjavascriptしか表示されません。
どうすればいいでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML5
1<!DOCTYPE HTML>
2<html>
3<head>
4        <meta charset="UTF-8">
5        <script type="text/javascript" src="graph1.js"></script>
6        <script type="text/javascript" src="graph2.js"></script>
7        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
8</head>
9<body>
10<div>
11        <canvas class="canvas" id="graph1" width="400px" hight="400px"></canvas>
12</div>
13<div>
14        <canvas class="canvas" id="graph2" width="400px" hight="400px"></canvas>
15</div>
16</body>
17</html>

graph1
1var drawGraph = function(data){
2  var ctx = document.getElementById('graph1').getContext('2d');
3  var myChart = new Chart(ctx, {
4    type: 'line',
5    data: { labels: data[0],
6    datasets: [{ label:'気温', data:data[1] },
7               { label:'湿度', data:data[2] }]
8    }
9  });
10};
11
12window.onload=function () {
13    var data = [['12:00', '13:00', '14:00', '15:00', '16:00'],
14                [22, 23, 21, 20, 19],
15                [55, 50, 45, 43, 42]]
16    drawGraph(data);
17};

graph2
1var drawGraph = function(data){
2  var ctx = document.getElementById('graph2').getContext('2d');
3  var myChart = new Chart(ctx, {
4    type: 'line',
5    data: { labels: data[0],
6    datasets: [{ label:'気温', data:data[1],
7                 fill: false,
8                 backgroundColor: "rgba(200,30,30,0.4)",
9                 borderColor: "rgba(230,10,10,1)"},
10               { label:'湿度',
11                 fill:false,
12                 data:data[2],}]
13    }
14  });
15};
16
17window.onload=function () {
18    var data = [['12:00', '13:00', '14:00', '15:00', '16:00'],
19                [22, 23, 21, 20, 19],
20                [55, 50, 45, 43, 42]]
21    drawGraph(data);
22};

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/04/15 13:24

graph1.js/graph2.js の中身も提示してください。

退会済みユーザー

2019/04/15 14:36

追加しました。実はまだ本番のソースではなく、ネットで見つけたソースです。csvから読み込んだデータを可視化するのに縦に４つ（もしくは2行2列）で表示できたらとやり方を探っていた状態です。本番では４つともほぼ似たようなデータを読みこむのでjavascriptのソースも同じになる予定です。よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

graph2.jsの中でwindow.onloadを上書いているからです
代わりにイベントリスナーを使えば良いでしょう

追記
drawGraphの関数名も別にしましょう

投稿2019/04/15 14:39

編集2019/04/15 14:45

mitsu-wan

総合スコア136

退会済みユーザー

2019/04/15 14:54

graph2.jsのwindow.onloadをwindow.addEventListener('load', function ()にし、drawGraphをtestGraphにしたら表示されました。ありがとうございました。

行動規範の内容に同意します

既に回答がありますが、graph1.js/graph2.jsが同じグローバルスコープ内にあるため、同名の変数は上書きされてしまいます。

変数名を変えるか、即時関数などでスコープを変えるかする必要があります。

【JavaScriptのスコープ総まとめ - スコープの種類とその基本 | CodeGrid】
https://app.codegrid.net/entry/2017-js-scope-1

【関数とスコープ · JavaScriptの入門書 #jsprimer】
https://jsprimer.net/basic/function-scope/

window.onloadには1つしか関数を登録できませんが、addEventListener()であれば複数のイベントが登録できます。

【EventTarget.addEventListener() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

【三章第二回　イベントリスナ — JavaScript初級者から中級者になろう — uhyohyo.net】
https://uhyohyo.net/javascript/3_2.html

関数drawGraphをdataと描画対象（id）を取る関数に書き直し、window.onload時に複数のグラフを一気に処理するほうが効率的だと思います。

js
1var drawGraph = function( data, id ) {
2  var ctx = document.getElementById( id ).getContext( '2d' );
3  var myChart = new Chart( ctx, data );
4};
5
6window.onload=function () {
7  drawGraph( {
8    type: 'line',
9    data: { labels: [ '12:00', '13:00', '14:00', '15:00', '16:00' ],
10    datasets: [{ label:'気温', data: [ 22, 23, 21, 20, 19 ],
11                 fill: false,
12                 backgroundColor: "rgba(200,30,30,0.4)",
13                 borderColor: "rgba(230,10,10,1)"},
14               { label:'湿度', fill:false, data: [ 55, 50, 45, 43, 42 ] }]
15    }
16  }, 'graph1' );
17  drawGraph( {
18    type: 'line',
19    data: { labels: [ '12:00', '13:00', '14:00', '15:00', '16:00' ],
20    datasets: [{ label:'気温', data: [ 22, 23, 21, 20, 19 ] },
21               { label:'湿度', data: [ 55, 50, 45, 43, 42 ] }]
22    }
23  }, 'graph2' );
24}; // 雰囲気コード。未テスト