Отзывчивый ChartJS в структуре страницы - PullRequest
Новая
       6

Отзывчивый ChartJS в структуре страницы

0 голосов
/ 09 января 2019

Как только я предоставлю гибким значениям divJ chartJS, например width = 100%, график больше не будет анимирован.

Я пытался использовать такие вещи, как width = 45vh, но это не соответствует моим потребностям, поскольку диаграмма всегда должна заполнять 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

Как видите, у меня есть два графика. Второй работает, так как имеет фиксированную ширину.

Диаграмма должна быть отзывчивой и всегда занимать 100% ширины 'div id = "1" class = "grid__item large - наполовину средний вниз - один целый фрагмент статистики правого изображения" (правая сторона плитки / секции).

И он должен анимироваться при загрузке страницы, а не просто отображаться без анимации.

Полезные ссылки: https://github.com/chartjs/Chart.js/issues/2958 https://www.chartjs.org/docs/latest/general/responsive.html#configuration-options

...