Chart.jsのグラフが表示されない

Chart.jsでグラフを表示する処理をpromiseでどんどん表示したいのですがうまくいきません。
コードのような処理だとタブAの中にグラフは表示されるのですが、タブBでグラフが表示されません。

バージョンは

Chart.js Version: 2.7.3
Bootstrap3

です。

グラフが表示される場所がtabの中にあるのも関係しているのでしょうか？


<!-- タブ・メニュー -->
<ul class="nav nav-tabs">
	<li><a href="#sampleContentA" data-toggle="tab">タブＡ</a></li>
	<li class="active"><a href="#sampleContentB" data-toggle="tab">タブＢ</a></li>
</ul>

<!-- タブ内容 -->
<div class="tab-content">
	<div class="tab-pane" id="sampleContentA">
		<canvas id="data1"></canvas>
	</div>
	<div class="tab-pane active" id="sampleContentB">
		<canvas id="data2"></canvas>
	</div>
</div>

$(document).ready(() => {

	let label;
	let data1;
    let data2;


		$.ajax({
			//データを取得
		}).then(
			//成功時の処理
			function(data) {
				label= data.label;
				data1= data.data1;
				data2= data.data2;
			}
		).then(
			showData1
		)
		.then(
			showData2
		)

	let showData1= () =>{
		let chart ;
		return new Promise(() => {
			chart = new Chart(canvasContext, options);//タブAのcanvasにグラフ表示(詳細省略)
        });
    });


	let showData2 = () =>{
		let chart ;
		return new Promise(() => {
			chart = new Chart(canvasContext, options);//タブBのcanvasにグラフ表示(詳細省略)
        });
    });

};

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

回答1件

ベストアンサー

thenのチェーンが呼び出されないままになってしまってます。1つめの関数を明確に
終わらせてください。

上記の書き方であれば、showData1のPromiseでresolve呼び出して終わらせてください。

javascript
1 let showData1= () =>{
2        let chart ;
3        return new Promise((resolve) => {
4            chart = new Chart(canvasContext, options);//タブAのcanvasにグラフ表示(詳細省略)
5             resolve();
6        });
7    });