диаграммы не анимируются, когда «отзывчивый: правда» - PullRequest
Новая
       17

диаграммы не анимируются, когда «отзывчивый: правда»

0 голосов
/ 24 октября 2019

Графики анимируются при первой загрузке, когда responsive установлен на false.

У меня есть два холста с position:absolute внутри div с position:relative, чтобы сделать их рядом

вот JS 

new Chart(share,{
    type: 'doughnut',
    data: Data2,
    options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          position: 'bottom',
        },
        title: {
          display: true,
          text: 'repartition des sorties du stock aux regions'
        },


        tooltips: {
          callbacks: {
            label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
              var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                return previousValue + currentValue;
              });
              var currentValue = dataset.data[tooltipItem.index];
              var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
              return precentage + "%";
            }
          }
        }
      }
})


// draw line chart
 new Chart(io,{
    type: 'line',
    data: Data,
    options: {
        responsive : true,
        maintainAspectRatio : false,
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            fontColor: "#000080",
          }
        },

        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
})
io.canvas.parentNode.style.height = '600px';
io.canvas.parentNode.style.width = '500px';
io.canvas.parentNode.style.position = 'relative';


io.canvas.style.position = 'absolute';

share.canvas.style.position = 'absolute';
share.canvas.style.left='600px';

и вот HTML 

    <div id="canvasC">

    <canvas id="IO" width="600" height="400" ></canvas>
    <canvas id="share" width="600" height="400" ></canvas>



    </div>
...