htmlのinnerHTMLについて

現在Webページを作成しており、Ajax通信でやり取りをしたデータでHtmlの一部分を更新するというものを作成しております。
グラフAのデータを押下するとそれに基づいたデータのグラフBが別領域に表示されるという仕組みを作っている最中なのですが
canvasとscriptのタグを埋め込むためのinnerHTMLが効かずに画面が更新されません。。。
原因がわかる方がいたら回答をお願いしたいです。

現在できている段階としては
①グラフA押下でAjax通信が始まり、サーブレット側と通信をする。
②java側でグラフB表示用のHTMLを作成する
③jsp側にHTMLを返す
ここまでできています。

試してみた事は
jsp側に帰ってきた値をそのままコピーしてjsp内にベタで張り付ける
→グラフが表示される
innerHTMLで書き換える値をAjax通信で取得した値ではなくベタの文字列でやってみた
→設定した文字列に置き換わった（ここまでできていればinnerHTMLが原因ではないと思うのですが...）

innerHTMLにcanvasタグやscriptタグは使用できないなどの場合があるなら
どういうアプローチをして実現できるのかのアドバイスももらえると嬉しいです。

何か追加でほしい情報等あれば追加します。
宜しくお願い致します。

10/22追記

Html
1
2<%@ page language="java" contentType="text/html; charset=UTF-8"
3	pageEncoding="UTF-8"%>
4<!DOCTYPE html>
5<html>
6<head>
7<meta charset="UTF-8">
8<title>hogeTitle</title>
9
10<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/Chart.js"></script>
11<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
12
13<script type="text/JavaScript">
14	// 取得してきたデータを画面に反映する
15	function setjsondata(json_key, json_value) {
16		var a = json_value;
17		document.getElementById('GraphBDiv').innerHTML = "<br />";
18		document.getElementById('GraphBDiv').innerHTML = a;
19	}
20</script>
21
22</head>
23<body style="height: 100%; margin: 0%; background-color: #494949">
24
25	<div style="width: 50%; height: 100%; float: left;">
26		<table width="100%" style="margin-top: 30px;">
27			<tr align="center">
28				<td style="color: white; width: 70%"><%= request.getAttribute("pageTitle" )%></td>
29				<input type='hidden' id='pageDisp' value= '<%= request.getAttribute("pageTitle" )%>' >
30				<td style="color: white; width: 30%"><button type="button" class="btn" autofocus="true">グラフ切り替え</button></td>
31			</tr>
32		</table>
33		<p style="margin-top: 50px;">
34			<canvas id="GraphA" width="600" height="500"
35				style="background-color: #494949;"></canvas>
36		</p>
37	</div>
38
39	<div style="width: 50%; height: 100%; float: right;">
40		<div id="GraphBDiv" style="width: 100%; height: 50%;">
41		</div>
42		<div style="width: 100%; height: 50%;">
43		</div>
44	</div>
45	<script>
46  	var ctx = document.getElementById("GraphA");
47 	var myChart = new Chart(
48 	ctx,
49	{
50		type : 'bar',
51		data: {
52        	labels: ["昨日", "今日"],
53          	datasets: [
54          	{
55              label: "データ１",
56              borderWidth:1,
57              backgroundColor: "#EFEA5A",
58              borderColor: "#EFEA5A",
59              data: [23, 54]
60          	},{
61              label: "データ2",
62              borderWidth:1,
63              backgroundColor: "#048BA8",
64              borderColor: "#048BA8",
65              data: [25, 22]
66          	}]
67
68      	},
69		options : {
70			responsive : true,
71
72			title : {
73			display : true,
74			text : 'グラフA',
75			padding : 3,
76			fontColor : "#fff",
77			fontSize: 15
78		},
79		scales : {
80			xAxes : [ {
81				ticks : {
82					fontColor : "#fff",
83					fontSize: 15
84				},
85				stacked : true,
86				categoryPercentage : 0.4,
87				fontSize: 15
88			} ],
89			yAxes : [ {
90					ticks : {
91					fontColor : "#fff",
92				},
93				stacked : true,
94				fontSize: 15
95			} ]
96		},
97		legend : {
98			labels : {
99				boxWidth : 20,
100				padding : 20,
101				fontColor : "#fff",
102				fontSize: 14
103			},
104			display : true
105		},
106		onClick : function(event, activeElements) {
107			if (activeElements.length) {
108				var hoge1 = "ほげ";
109				var hoge2 = "ほげ";
110
111				var postData = {
112					'hoge1':hoge1,
113					'hoge2':hoge2,
114				};
115				var postUrl = "/HogeProject/Hoge(web.xmlで指定したサーブレット)";
116				$.ajax({
117					url: postUrl,
118					type: "POST",
119					dataType: "json",
120					data: postData,
121					success: function(json){
122						if(json["status"] == "error"){
123							alert(json["message"]);
124							return false;
125						}
126						for(var j in json){
127							setjsondata(j, json[j]);
128						}
129					}
130				});
131			}
132		}
133	}
134});
135</script>
136
137</body>
138</html>

グラフAのデータをクリックするとグラフBが表示されるというのが期待結果です。

m.ts10806

2018/11/23 09:30

実際のコードをご提示ください。innerHTML自体はJavaScriptの機能では？タグの整理をお願いします

mastan1117

2018/11/25 12:30

返答が遅くなり申し訳ございません。追記、修正依頼ありがとうございます。編集にて実際のコードを提示致します

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

回答3件

私もinnerHTMLにscriptタグを入れて「動かなーい！」と叫んだことがあります。
英語力に自信がないのですが、たぶんそういう仕様だと読み解いて諦めました。

https://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-script-element

When inserted using the document.write() method, script elements execute (typically synchronously), but when inserted using innerHTML and outerHTML attributes, they do not execute at all.

document.createElementでscriptタグを作ってから追加したら動くらしいのですが、試してないので確証は有りません。

Chart.jsをお使いならデータだけjsonで返して表示するほうが早いかもしれません。
私は結局別のグラフツールを使うことにしたので当時のソースが残ってないのですが、

https://qiita.com/ryomaDsakamoto/items/e61e1501683eeddf4338

こちらの記事を参考にしながらajaxでグラフデータを受け取って、追加のグラフを作ってました。

あと、転記ミスかもしれませんが

javascript
1    function setjsondata(json_key, json_value) {
2        var a = json_value;
3        document.getElementById('GraphBDiv').innerHTML = "<br />"; // ここ
4        document.getElementById('GraphBDiv').innerHTML = a; //　ここ
5    }

「ここ」と書いたところがinnerHTMLに対して追加ではなく上書きになってるので、最後の値しか入ってなさそうです。
createElement方式で試されるときは追加になるように修正された方が良いかと思います。

投稿2018/11/27 07:22

SystemAjisai

総合スコア171

SystemAjisai

2018/11/27 07:25

質問者さんの自己解決と入れ違いになりました。すみません。。。

mastan1117

2018/11/27 07:29 編集

回答くださり、ありがとうございました。回答に気づかず、自己解決法をBAにしてしまったのですが、SystemAjisaiさんの言う通り ajaxで返すデータをHTMLの文字列ではなく、グラフ作成に使用するデータを受け取るという方式に変更しそのデータでグラフのnewを行うことで再描画するという方法に変えたところ、解決いたしました。グラフを新たに作成するという観点にたどり着くことができてなかったのが原因でした。ただscriptタグをinnerHTMLで差し込むだけでは動かないのですね、勉強になりました。感謝！！！

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

自己解決

そもそもHTMLを作成してinnerHTMLで置き換えるという考えが間違っていた。
onClickメソッドのAjax通信部分を

html
1$.ajax({
2	url: postUrl,
3	type: "POST",
4	dataType: "json",
5	data: postData,
6	success: function(json){
7	if(json["status"] == "error"){
8		alert(json["message"]);
9		return false;
10	}
11								　　　
12　　　　　　　　　graphBCreate(json["sendData"]);←ここを変更
13	}
14})
15
16<script>
17  function graphBCreate(json_value){
18
19	var ctx = document.getElementById("GraphB").getContext("2d");
20	var myBar = new Chart(ctx, {
21	type: 'bar',                           //◆棒グラフ
22	data: {                                //◆データ
23		labels: ['5840','4090'],     //ラベル名
24		datasets: [{                       //データ設定
25		    data: [1.7,98.3],          //データ内容
26		    backgroundColor: ['#ff7a7a', '#ff7a7a']   //背景色
27		}]
28	},
29	options: {                             //◆オプション
30		responsive: true,                  //グラフ自動設定
31		legend: {                          //凡例設定
32			display: false                 //表示設定
33		},
34		title: {                           //タイトル設定
35	                display: true,                 //表示設定
36			text: 'ほげグラフ',                //ラベル
37			fontColor: "#fff",
38			size: 10
39		},
40		scales: {                          //軸設定
41			yAxes: [{                      //y軸設定
42				display: true,             //表示設定
43				ticks: {                      //最大値最小値設定
44					fontColor: "#fff",
45					min: 0
46				},
47			}],
48			xAxes: [{                         //x軸設定
49						display: true,                //表示設定
50						categoryPercentage: 0.2,      //棒グラフ幅
51						ticks: {
52							fontColor: "#fff"
53						},
54					}],
55				},
56				layout: {                             //レイアウト
57					padding: {                          //余白設定
58						left: 100,
59						right: 50,
60						top: 0,
61						bottom: 0
62					}
63				}
64			}
65		});
66  	}
67</script>
68