Гистограмма ChartJs - держите бары слева, а не равномерно распределите по ширине - PullRequest
Новая
       13

Гистограмма ChartJs - держите бары слева, а не равномерно распределите по ширине

0 голосов
/ 11 сентября 2018

Я использую ChartJs 2.7.2 для рисования простой гистограммы. В моем приложении количество баров будет варьироваться от 5 до 15. По умолчанию бары равномерно распределены по всей ширине графика. Однако я хочу, чтобы столбцы имели фиксированную ширину / выровнены по левому краю (поэтому, когда только 5 столбцов, они не занимают всю ширину, но остаются выровненными по левому краю). Пожалуйста, смотрите скриншот ниже для уточнения.

enter image description here

1 Ответ

0 голосов
/ 02 мая 2019

Вы можете предоставить массив labels, дополненный пустыми строками необходимой длины, например, 15.

Это обеспечит постоянное количество категорий на оси и, таким образом, гарантирует, что стержни будут оставаться одинаковой ширины и выровнены по левому краю, даже если имеется меньше стержней ( Fiddle ).

(Если хотите, вы также можете дополнить массив data 0 для согласованности, но это необязательно - массив labels определяет то, как выглядит ось.) 

var data = [12, 19, 3, 5, 2];
var labels = ["a", "b", "c", "d", "e"];

for (var i = labels.length; i < 15; i++) {
  labels.push("");
}

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Count',
      data: data
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  } 
});
...