chart.jsで描いたドーナツグラフを削除したい

Question

前提・実現したいこと

Ruby on rails5を用いてアプリケーションを開発しています。

解決したい事はchart.jsで表示したドーナツグラフを削除したいです。

具体系に説明すると
現在index.html.hamlにあるグラフ表示ボタンを押すとドーナツグラフが表示されます。

表示ボタンを押すとlocalstorageにクリック時の時間が保存されクリックからの経過時間をグラフにsetTimeoutで一秒ごとに更新する機能をつけました。（timer.jsに記載のdata[70,30]と書かれている部分に経過時間ごとに比率が変わっていくのですが、今回の質問とはあまり関係がないところなので適当に数字を置いてます）

そこで削除ボタンを押すとドーナツグラフが消えるようにするためにmyPieChart.destroy();と書くとグラフが削除されると思ったのですが削除されません。

削除ボタンを押した後リロードするとグラフは消えてくれるのですがリロードせずに削除ボタンを押すとすぐにグラフが消えるようにしたいです。

どこを改善するとうまく動作するでしょうか。

app/views/users/index.html.haml

%input{type: 'button', value: 'グラフ表示', onclick: 'chartShowing();'}
%input{type: 'button', value: '削除', onclick: 'reset();'}
%canvas#myPieChart

app/assets/javascripts/timer.js

function reset() {
    localStorage.removeItem("time");
}

elapsed = 0;
function chartShowing() {
	var start = new Date();
	localStorage.setItem("time", start.getTime());
	elapsed = parseInt((new Date().getTime() - localStorage.getItem("time")) / 1000 / 60);
	var ctx = document.getElementById("myPieChart");
		var myPieChart = new Chart(ctx, {
			type: 'doughnut',	//ドーナツチャートを描画する場合、typeに'doughnut'を指定する。
			data: {
				datasets: [{
						backgroundColor: [　
								"#ff0000",
								"#000000"
						],
						data: [70,30]
				}]
			}
		})
		if (localStorage.getItem("time")) {
			var id = setTimeout(chartShowing, 1000);
		} else {
			//削除ボタン押した時
			clearTimeout(id);
			myPieChart.destroy();
		}
}

試したこと

myPieChart.destroy();と記述するとグラフが削除されるとネットに書いていたのですが削除されませんでした。

Answer 1

var now = 0;
var elapsed = 0;
var myPieChart;
var id;
function reset() {
    localStorage.removeItem("time");
    clearTimeout(id);
    myPieChart.destroy();
}

elapsed = 0;

function chartShowing() {
    var start = new Date();
    localStorage.setItem("time", start.getTime());
    elapsed = parseInt((new Date().getTime() - localStorage.getItem("time")) / 1000 / 60);
    var ctx = document.getElementById("myPieChart");
        myPieChart = new Chart(ctx, {
            type: 'doughnut',    //ドーナツチャートを描画する場合、typeに'doughnut'を指定する。
            data: {
                datasets: [{
                        backgroundColor: [　
                                "#ff0000",
                                "#000000"
                        ],
                        data: [70,30]
                }]
            }
        })
        if (localStorage.getItem("time")) {
            id = setTimeout(chartShowing, 1000);
        } 
}

Comments

[Homaresan]

しっかり削除できるようになりました！
ありがとうございます！