Как выровнять бары ChartJS по левому краю? - PullRequest
Новая
       10

Как выровнять бары ChartJS по левому краю?

0 голосов
/ 11 декабря 2018

Я хочу создать гистограмму на ChartJS, но у меня нет успеха при попытке устранить этот «разрыв» между 0-осью Y и первой гистограммой.Это вообще возможно?

Это пример с небольшим разрывом This is the example with a small gap

А вот что я хочудостичь без пробела And here is what I want to achieve, without the gap

HTML 

<canvas id="openedCanvas" height="230" width="680"></canvas>

Javascript 

var data = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    };
var options = {}

var chart = new Chart($('#openedCanvas'), {
  type: 'bar',
  data: data,
  options: options
});

А вот и работает Codepen https://codepen.io/fermijs/pen/ZmPRaB

Спасибо:)

1 Ответ

0 голосов
/ 12 декабря 2018

Чтобы достичь ожидаемого результата, используйте опцию масштабирования для оси x

barPercentage против секции categoryPercentage в https://www.chartjs.org/docs/latest/charts/bar.html?h=scales

Оба из 1.0 будут складываться вместе, поэтому настройте в соответствии с вашими требованиями 

scales: {
        xAxes: [{
            categoryPercentage: 0.99,
            barPercentage: 1.0
        }]
    }

codepen - https://codepen.io/nagasai/pen/yGYJKE

...