Блог

Я хотел бы отображать горизонтальные столбчатые диаграммы в Chartist, высота которых зависит от размера данных. Другими словами, ширина может быть фиксированной шириной экрана, но высота или количество столбцов должны меняться в зависимости от размера данных.

Прямо сейчас я использую соотношение сторон ct-square, но нахожу, что оно часто слишком велико или слишком мало для данных. Есть ли какой-либо способ освободить размер диаграммы от ограничения соотношения сторон?

Если я правильно понял, вы хотите этого: https://codepen.io/adelriosantiago/pen/ExKdepG

В основном после добавления новой строки данных размер корректируется таким образом, чтобы пользователь мог прокручивать данные. Это достигается с помощью

 let domChart = document.getElementById("bar-chart")
let currentHeight = domChart.clientHeight // Get current height
domChart.style.height = currentHeight   100   "px" // How much to add after adding a new row
  

Продолжение: приведенный выше код на самом деле не «настраивает базовую высоту в зависимости от размера данных», но это помогает получить представление о том, как это реализовать. Этот CodePen присваивает высоту на основе data.labels.length * 100 .