chart.jsでキャッシュが残ってしまう。

Question

前提・実現したいこと

chart.jsを使用して、グラフ作成をしています。
2回目にグラフを表示した時に、1回目の履歴が残らないようにしたいです。

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

2回目のグラフが表示された時に、グラフの少し上でマウスを動かすと1回目のグラフが出てきてしまいます。

▼ デモサイト
https://ki-hi-ro.com/sample/chart-js__for-ask/

■ 使用例
1回目は、数値1に1、数値2に2を入力し、ボタンを押してグラフを出現させる。
画面をリロードせずに、数値1に5、数値2に10を入力して、再度ボタンを押す。
出てきたグラフの少し上でマウスを動かすと、1回目のグラフが出てきてしまう。

該当のソースコード

<div class="main__content__primary__input">
    <div class="input__inner">
      <p>数値1</p>
      <input class="number1">
      <p>数値2</p>
      <input class="number2">
      <button class="complete-btn" style="display: block;">ボタン</button>
    </div>
</div>
<div class="main__content__primary__output-after" style="position:relative;display:none;">
    <div style="position: absolute; left:330px; bottom:-370px; height: 400px; width: 300px;">
      <canvas id="myChart"></canvas>
    </div>
</div>

$(function(){
  $('.complete-btn').click(function(){
    $('.main__content__primary__output-after').css('display','flex');
    if (!clickNumber) {
      var clickNumber = 0;
    } 
    if (clickNumber == 1) {
      myChart.destroy();
      myChartRight.destroy();
    }
    if (clickNumber == 0) {
      clickNumber += 1;
    }
    var plugin = {
      afterDatasetsDraw: function (chart, easing) {
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    ctx.fillStyle = '#fff';

                    var fontSize = 16;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
                    
                      var dataString = dataset.data[index].toLocaleString();
                      var dataText = dataset.label[index];
                    
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'hanging';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x + 80, position.y - (fontSize / 4) - padding + 20);
                    ctx.fillText(dataText, position.x - 100 , position.y - (fontSize / 4) - padding + 20);
      
                });
            }
        });
    }
    }
    var number1 = $('.number1').val();
    var number2 = $('.number2').val();
    
    var type = 'bar';
    var data = {
      labels: [""],
      datasets: [
        {
          label: ["数値1"],
          backgroundColor: "rgba(0,0,0,.4)",
          data: [Number(number1)]
        },
        {
          label: ["数値2"],
          backgroundColor: "rgba(0,0,0,.3)",
          data: [Number(number2)]
        }
      ]
    };
    
    var options = {
      maintainAspectRatio: false,
      title: {
        display: false,
        text: ''
      },
      scales: {
          xAxes: [{
                stacked: true, 
                display: false
          }],
          yAxes: [{
                stacked: true, 
                display: false
          }]
      },
      legend: {
          display: false
       },
       tooltips: {
        enabled: false,
        position: 'customMode',
       },
    };
    var ctx = document.getElementById("myChart").getContext('2d');
    ctx.canvas.height = 525;
    window.myChart = new Chart(ctx, {
      plugins: [plugin],
      type: type,
      data: data,
      options: options
    });
  });
})

試したこと

https://qiita.com/saka212/items/5714fa68deb44a185ec3
この記事を参考にして、1回目のグラフを消去しようとしました。

▼ グラフのインスタンスをグローバル変数で生成

window.myChart = new Chart(ctx, {
      plugins: [plugin],
      type: type,
      data: data,
      options: options
});

▼ 2回目以降の時に以前のグラフを削除する処理

if (!clickNumber) {
  var clickNumber = 0;
} 
if (clickNumber == 1) {
   myChart.destroy();
}
if (clickNumber == 0) {
 clickNumber += 1;
}

補足情報

chart.jsのCDNは、bodyタグの直前で読み込みました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
</body>

Answer 1

https://teratail.com/questions/239336
こちらの通りに書き直してみたら解決しました。