Question

一旦我给chartJS div灵活的值（例如width = 100％），该图就不再动画了。

我尝试使用width = 45vh之类的方法，但这不符合我的需要，因为图表应始终填充其上方div宽度的100％。

我还尝试将弹性宽度添加到div id =“ 1”（外部div）中。然后，图表开始制作动画，但宽度完全固定。

在Codepen中，它使用完全相同的代码： https://codepen.io/anon/pen/ebjvMm

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Standard", "Premium"],
        datasets: [{
            label: 'Noahs Box',
            data: [139, 189],
            backgroundColor: [
                'rgba(30, 56, 79, 1)',
                'rgba(30, 56, 79, 1)',
            ],
            borderColor: [
                'rgba(30, 56, 79, 1)',
                'rgba(30, 56, 79, 1)',
            ],
            borderWidth: 1
        },
     {
            label: 'Amazon',
            data: [192.30, 440.55],
            backgroundColor: [
                'rgba(255, 153, 0, 1)',
                'rgba(255, 153, 0, 1)'
            ],
            borderColor: [
                'rgba(255, 153, 0, 1)',
                'rgba(255, 153, 0, 1)'
            ],
            borderWidth: 1
        }],
    },
    options: {
      responsive: true,
  	  maintainAspectRatio: false,
      legend: {
      	display: true
      },
      animation: {
       		duration: 7500,
        },
      title: {
			display: true,
       		text: 'Comparison: Noahs Box vs. Amazon'
        },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
});

<div style="height:450px">
 <div style="position: relative;
  margin: auto;
  height: 100%;
  width: 100%;">
       <canvas id="myChart"></canvas></div></div>

这是我遇到问题的页面：https://noahsbox.com/pages/price-comparison

如您所见，我有两个图表。第二个正在工作，因为它具有固定宽度。

图表应具有响应性，并且始终采用'div id =“ 1” class =“ grid__item大-中一半向下-整个右图统计图块的宽度的100％（图块/部分的右侧）。

并且它在加载页面时应该具有动画效果，而不仅仅是在没有任何动画的情况下显示。

有用的链接： https://github.com/chartjs/Chart.js/issues/2958 https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options

页面结构中的响应式ChartJS

0 个答案: