Как получить диаграммы / графики JavaScript для загрузки - PullRequest
Новая
       8

Как получить диаграммы / графики JavaScript для загрузки

0 голосов
/ 26 апреля 2019

Мои диаграммы 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
                }
            }]
        }
    }
});

Я вижу мерцание при загрузке страницы и переключаюсь между графиками. Затем графики загружены, и мерцания больше нет. Я хотел бы избавиться от этого мерцания, чтобы я мог плавно переключаться между графиками сразу после загрузки страницы.

...