Chart.jsのグラフ再描画時の挙動を制御する方法について

chart.jsを使ってエリアごとのデータのグラフを作成しています。
データはAPIから取得しています。
グラフの動きの仕様として、以下があります。
・カレンダー（datepickerUI）を使って日付をクリックすると、グラフが切り替わる
・期間（日・週・月）をクリックすると、グラフが切り替わる

chart.jsでは、一度グラフを描画した後に、リロード以外で同じcanvasタグにグラフを再描画すると、
再描画前のグラフが表示される事象があり、それを制御するのに、

.destroy();

を使用すると解消されるとのことで、グラフの切り替えのタイミングで使用したのですが、うまく制御することができませんでした。

.destroy()はどのタイミングで呼べば制御できるでしょうか。
教えていただけると幸いです。

以下、実装済みのJavascriptです。

javascript
1function calendar() {
2	// カレンダー
3	$('#datepicker')
4		.datepicker({
5			dateFormat: 'yy/mm/dd',
6			buttonText: '日付選択',
7			showOn: 'button',
8			beforeShow: function (input, inst) {
9				var calendar = inst.dpDiv;
10				setTimeout(function () {
11					calendar.position({
12						my: 'right top',
13						at: 'right bottom',
14						of: input
15					});
16				}, 1);
17			},
18			onSelect: function (dateText, inst) {
19				console.log('onSelect', dateText, inst);
20				updateCharts();
21			}
22		})
23		.datepicker('setDate', new Date());
24}
25
26// グラフの描画
27function drawChart(areaData, canvasId) {
28	var ctx = $(canvasId)[0].getContext('2d');
29	var myChart = new Chart(ctx, {
30		type: 'line',
31		data: areaData,
32		options: {
33			legend: {
34				position: 'bottom', // タイトルでの position と同じ
35				labels: {
36					fontSize: 12, // ┐
37					fontColor: 'rgba(72, 139, 199, 1)' // │タイトルでの fontSize ～ fontFamily と同じ
38				}
39			},
40			scales: { //軸の設定
41				xAxes: [ // Ｘ軸設定
42					{
43						scaleLabel: { // 軸ラベル
44							display: true, // 表示設定
45							fontColor: 'rgba(72, 139, 199, 1)', // 文字の色
46							fontSize: 12 // フォントサイズ
47						},
48						gridLines: { // 補助線
49							color: 'rgba(72, 139, 199, 1)', // 補助線の色
50						},
51						ticks: { // 目盛り
52							maxTicksLimit: 7,
53							fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色
54							fontSize: 12 // フォントサイズ
55						}
56					}
57				],
58				yAxes: [ // Ｙ軸設定
59					{
60						scaleLabel: { // 軸ラベル
61							display: true, // 表示の有無
62							fontFamily: 'sans-serif',
63							fontColor: 'rgba(72, 139, 199, 1)', // 文字の色
64							fontFamily: 'sans-serif',
65							fontSize: 12 // フォントサイズ
66						},
67						gridLines: { // 補助線
68							color: 'rgba(72, 139, 199, 1)', // 補助線の色
69							zeroLineColor: 'rgba(72, 139, 199, 1)' // y=0（Ｘ軸の色）
70						},
71						ticks: { // 目盛り
72							min: 0, // 最小値
73							//max: 30, // 最大値
74							stepSize: 5, // 軸間隔
75							fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色
76							fontSize: 12 // フォントサイズ
77						}
78					}
79				]
80			},
81			plugins: {
82				colorschemes: {
83					scheme: 'brewer.Paired12',
84					fillAlpha: 0.2
85				}
86			}
87		}
88	});
89}
90//データ
91function updateCharts() {
92	// 日付取得
93	var date = $('#datepicker').val();
94
95	// activeな期間取得
96	var type = $('.active').attr('data-value');
97
98	// URL を作る（今回は単純なので単に連結する）
99	var url = 'https://example.com/data' +
100		'?date=' + date +
101		'&type=' + type;
102
103	// REST API を叩く
104	$('#error').hide();
105	var request = superagent
106		.get(url)
107		.set('x-api-key', 'abcdefghi')
108		.end(function (error, response) {
109			if (error) {
110				$('#error').text(JSON.stringify(error, null, 2));
111				$('#error').show();
112				return;
113			}
114			var data = response.body;
115			console.log(data);
116			//エリアごとにデータ分割
117			for (i = 0; i < 10; i++) {
118				var areaData = {
119					datasets: [data.datasets[i]],
120					labels: data.labels
121				};
122				console.log(areaData, '#charts' + i);
123				if (myChart) {
124					myChart.destroy();
125				}
126				drawChart(areaData, '#charts' + i);
127			}
128		})
129}
130// Day, Week, Monthクリック時の処理
131$('div.typeApi').on('click', function (e) {
132	var typeValue = $(e.target).attr('data-value');
133	$('#type').val(typeValue);
134	// Day, Week, Monthにactiveを追加
135	$('div.typeApi').removeClass('active');
136	$(e.target).addClass('active');
137	updateCharts();
138});
139
140$(function () {
141	calendar();
142	updateCharts();
143});
144

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

回答1件

自己解決

こちらで実現できました。

Jquery
1function calendar() {
2    // カレンダー
3    $('#datepicker')
4        .datepicker({
5            dateFormat: 'yy/mm/dd',
6            buttonText: '日付選択',
7            showOn: 'button',
8            beforeShow: function (input, inst) {
9                var calendar = inst.dpDiv;
10                setTimeout(function () {
11                    calendar.position({
12                        my: 'right top',
13                        at: 'right bottom',
14                        of: input
15                    });
16                }, 1);
17            },
18            onSelect: function (dateText, inst) {
19                console.log('onSelect', dateText, inst);
20                updateCharts();
21            }
22        })
23        .datepicker('setDate', new Date());
24}
25
26// グラフの描画
27function drawChart(areaData, canvasId) {
28    var ctx = $(canvasId)[0].getContext('2d');
29    var chart = $(canvasId).data('chart');
30    if (chart) {
31      chart.destroy();
32    }
33    chart = new Chart(ctx, {
34        type: 'line',
35        data: areaData,
36        options: {
37            legend: {
38                position: 'bottom', // タイトルでの position と同じ
39                labels: {
40                    fontSize: 12, // ┐
41                    fontColor: 'rgba(72, 139, 199, 1)' // │タイトルでの fontSize ～ fontFamily と同じ
42                }
43            },
44            scales: { //軸の設定
45                xAxes: [ // Ｘ軸設定
46                    {
47                        scaleLabel: { // 軸ラベル
48                            display: true, // 表示設定
49                            fontColor: 'rgba(72, 139, 199, 1)', // 文字の色
50                            fontSize: 12 // フォントサイズ
51                        },
52                        gridLines: { // 補助線
53                            color: 'rgba(72, 139, 199, 1)', // 補助線の色
54                        },
55                        ticks: { // 目盛り
56                            maxTicksLimit: 7,
57                            fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色
58                            fontSize: 12 // フォントサイズ
59                        }
60                    }
61                ],
62                yAxes: [ // Ｙ軸設定
63                    {
64                        scaleLabel: { // 軸ラベル
65                            display: true, // 表示の有無
66                            fontFamily: 'sans-serif',
67                            fontColor: 'rgba(72, 139, 199, 1)', // 文字の色
68                            fontFamily: 'sans-serif',
69                            fontSize: 12 // フォントサイズ
70                        },
71                        gridLines: { // 補助線
72                            color: 'rgba(72, 139, 199, 1)', // 補助線の色
73                            zeroLineColor: 'rgba(72, 139, 199, 1)' // y=0（Ｘ軸の色）
74                        },
75                        ticks: { // 目盛り
76                            min: 0, // 最小値
77                            //max: 30, // 最大値
78                            stepSize: 5, // 軸間隔
79                            fontColor: 'rgba(72, 139, 199, 1)', // 目盛りの色
80                            fontSize: 12 // フォントサイズ
81                        }
82                    }
83                ]
84            },
85            plugins: {
86                colorschemes: {
87                    scheme: 'brewer.Paired12',
88                    fillAlpha: 0.2
89                }
90            }
91        }
92    });
93}
94//データ
95function updateCharts() {
96    // 日付取得
97    var date = $('#datepicker').val();
98
99    // activeな期間取得
100    var type = $('.active').attr('data-value');
101
102    // URL を作る（今回は単純なので単に連結する）
103    var url = 'https://example.com/data' +
104        '?date=' + date +
105        '&type=' + type;
106
107    // REST API を叩く
108    $('#error').hide();
109    var request = superagent
110        .get(url)
111        .set('x-api-key', 'abcdefghi')
112        .end(function (error, response) {
113            if (error) {
114                $('#error').text(JSON.stringify(error, null, 2));
115                $('#error').show();
116                return;
117            }
118            var data = response.body;
119            console.log(data);
120            //エリアごとにデータ分割
121            for (i = 0; i < 10; i++) {
122                var areaData = {
123                    datasets: [data.datasets[i]],
124                    labels: data.labels
125                };
126                console.log(areaData, '#charts' + i);
127                if (myChart) {
128                    myChart.destroy();
129                }
130                drawChart(areaData, '#charts' + i);
131            }
132        })
133}
134// Day, Week, Monthクリック時の処理
135$('div.typeApi').on('click', function (e) {
136    var typeValue = $(e.target).attr('data-value');
137    $('#type').val(typeValue);
138    // Day, Week, Monthにactiveを追加
139    $('div.typeApi').removeClass('active');
140    $(e.target).addClass('active');
141    updateCharts();
142});
143
144$(function () {
145    calendar();
146    updateCharts();
147});