Решение для регулировки положения и расстояния между данными по оси Y, показанной на горизонтальной гистограмме на графике js - PullRequest
Новая
       25

Решение для регулировки положения и расстояния между данными по оси Y, показанной на горизонтальной гистограмме на графике js

0 голосов
/ 03 февраля 2020

Ниже приведено решение для настройки размера холста, а также расстояния между столбцами на оси Y. 

<canvas id="chart" style="height: 100%"></canvas>

var chart = new Chart('chart', {
  type: 'horizontalBar',
  data: {
    labels: ['A'],
    datasets: [
      {
        data: [10],
        backgroundColor: '#af90ca',
        label: 'Before'
      },
      {
        data: [50],
        backgroundColor: '#c46998',
        label: 'After'
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      yAxes: [{
        stacked: true,
        barPercentage: 0.7,
        categoryPercentage: 1.0
      }]
    },
    responsive: true,
    maintainAspectRatio: false
  }
});

Я создал эту площадку для проверки кода.

https://codepen.io/iamsainikhil/pen/QWwePpX

Редактировать: Я нашел решение, добавив процентную высоту к холсту и добавив два параметра, например responsive & maintainAspectRatio, для которых установлено значение true и false соответственно.

...