Мне удалось написать простую диаграмму истории, основанную на наборе данных PostgreSQL. Я добавил горизонтальную полосу прокрутки, поместив элемент <canvas>
в <div>
, например:
<div id="chart-container" style="overflow-x: scroll;height:300px;">
<canvas id="chartid-1" style="height: 100%; width: 1000px "></canvas>
</div>
, а также установив флаги responsive: false
и maintainAspectRatio: false
в экземпляре диаграммы, чтобы вручную установитьширина / высота холста. С помощью этого метода у меня фиксированная ширина, и полоса прокрутки всегда видима / активна.
Моя проблема в том, что я хочу динамически изменять размер холста на основе количества элементов набора данных, чтобы, например, не было полосы прокрутки, когда набор данных небольшойи вместо этого увеличив ширину, чтобы расширить область диаграммы, когда набор данных содержит много элементов.
Возможно ли сделать это на стороне клиента (например, javascript / jquery)?
I 'используя последние версии Bootstrap / jQuery / ChartJS.
спасибо!