Chartjs 2,0 - Увеличение высоты оси х этикеток

Question

JSBin здесь: http://jsbin.com/xukuhanota/1/edit?output

Я пытаюсь увеличить высоту (или, по существу, верхние/нижние отступы) меток (клещ?) Вдоль оси х ,

Вот соответствующая бит код для диаграммы:

xAxes: [{ 
    id: 'x-axis-0', 
    type: 'category', 

    gridLines: { 
    display: false, 
    }, 

    ticks: { 
    fontSize: 16, 
    maxRotation: 0, 
    fontFamily: "opensans", 
    fontStyle: "bold", 

    paddingTop: 10,   // doesnt work 
    paddingBottom: 10,  // doesnt work 
    }, 


    paddingTop: 10,   // doesnt work 
    paddingBottom: 10,  // doesnt work 

Согласно documentation, есть paddingBottom и paddingTop свойства, но я не знаю, если/как они относятся к клещи против чешуи.

Answer 1

В документации указано, что «экземпляры шкалы имеют следующие свойства». Для меня это не похоже на то, что это некоторая настройка, которую вы можете дать, но некоторые настройки можно ожидать, если вы реализуете свой собственный масштаб.

У меня был беглый взгляд на code for their scale implementation, и, похоже, не имеют большого прямого контроля на вычислении свойств заполнения, за исключением одной установки padding, не документированный (см строка 40 в связанной версии) , Я попробовал применить его в jsbin (просто добавьте свойство padding к объекту ticks): он действительно повлиял на ось Y, но не на X.

Похоже, вам понадобится обеспечить собственную реализацию шкалы, если вы хотите лучше контролировать ... В версии, которую я связал, прокладка вычисляется в основном в методах calculateTickRotation и fit. Поэтому изменение отступов может быть таким же простым, как предоставление an afterFit callback параметрам масштаба, в которых вы просто меняете paddingTop и paddingBottom. Я не пробовал. В противном случае, create a subclass of Scale и предоставить метод afterFit.

Я не эксперт chart.js, поэтому не принимайте это как полный и окончательный ответ, но я надеюсь, что это даст полезное направление.

Answer 2

Просто для полноты картины, предоставляют варианты объектов, как это и ваша ось будет иметь фиксированную высоту, или изменить некоторые значения отступов

var options = { 
    scales: { 
     xAxes: [{ 
      afterFit: (scale) => { 
       scale.height = 120; 
      } 
     }] 
    } 
};