当“ response:true”时,图表不会动画

时间:2019-10-24 17:25:14

标签: javascript html html5-canvas chart.js

responsive设置为false时,图表将在首次加载时进行动画处理。

我在position:absolutediv的{​​{1}}内有两个画布,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>

0 个答案:

没有答案