如何获取要加载的JavaScript图表/图形

Question

页面加载后，我的Javascript图表闪烁，然后单击它们。一旦加载，闪烁就会消失。我认为页面加载时它们无法正确加载。

我尝试使用windows.onload函数无济于事。

var gtx = document.getElementById("canvas2");

//Chart.defaults.global.defaultFontFamily = "Lato";
//Chart.defaults.global.defaultFontSize = 18;

var relatedData = {
 label: 'Heat Related Deaths',
  data: [5,5,23,21,8,1],
  backgroundColor: 'rgb(240,45,58)',
  borderWidth: 0,
  yAxisID: "y-axis-related"
};

var causedData = {
  label: 'Heat Caused Deaths',
  data: [4,10,54,32,17,1],
  backgroundColor:  'rgb(91,97,138)',
  borderWidth: 0,
  yAxisID: "y-axis-related"
};

var monthData = {
  labels: ["May", "June", "July", "August", "September", "October"],
  datasets: [relatedData, causedData]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.6
    }],
    yAxes: [{
      id: "y-axis-related"
    }, 
           ]
  }
};

var barChart = new Chart(gtx, {
  type: 'bar',
  data: monthData,
  options: chartOptions
});
</script><


<canvas id="canvas3"></canvas></div>


<p>&nbsp;</p>

<p>&nbsp;</p>
<script>
var etx = document.getElementById('canvas3').getContext('2d');
var myChart2 = new Chart(etx, {
    type: 'bar',
    data: {
    labels: ["0-4", "5-19", "20-34", "35-49", "50-64", "65-74", "75+"],
    datasets: [{
    label: 'Number of Deaths (2018)',
    data: [0,0,18,32,66,41,25],
    backgroundColor: [
                'rgb(56,63,81)',
                'rgb(122,92,97)',
                'rgb(247,172,207)',
                'rgb(185,226,140)',
                'rgb(104,116,223)',
                'rgb(145,151,174)',
                'rgb(214,216,79)'
            ],
     borderColor: [
                'rgb(56,63,81)',
                'rgb(122,92,97)',
                'rgb(247,172,207)',
                'rgb(185,226,140)',
                'rgb(104,116,223)',
                'rgb(145,151,174)',
                'rgb(214,216,79)'
            ],
     borderWidth: 0
        }]
    },
    options: {
      legend: {display: false},
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

页面加载后，我看到闪烁，并且在图形之间切换。然后，图表加载完毕，不再闪烁。我希望摆脱这种闪烁现象，以便在页面加载后立即在图表之间轻松切换。