Статическая высота холста Chartjs

Я использую диаграммы.js 2.3.0 нарисовать график. Я хочу сделать высота статического графика (фиксированная, например, 200px) но также хотите, чтобы установить ширина to 100%. Одно из решений, которое я видел, - это сделать:

responsive: false

в параметрах графика. Но после этого, ширина также уменьшает. Есть ли лучший способ сделать это?

статическая высота и ширина 100%.

10
chart.js html5-canvas

4 ответов

options: {
responsive: true, 
maintainAspectRatio: false
}

он отлично работает с этими параметрами.

20

Если вы хотите нарушить соотношение сторон, вы можете использовать С docs. Высота и ширина должны быть взяты из значений набора canvas или использовать css для установки стилей для элемента canvas.

options: {
    responsive: false, 
    maintainAspectRatio: false
}
1

чтобы заставить его работать, вам также нужно обернуть диаграмму в выделенный элемент, а также использовать следующие параметры:

options: {
    responsive: true, 
    maintainAspectRatio: false
}

пример:

<div>
    <canvas id="xxx"></canvas>
</div>

см. официальные документы:

обнаружение изменения размера холста не может быть сделано непосредственно из элемента холста. Таблица.js использует родительский контейнер для обновления размеров отрисовки и отображения холста. Однако этот метод требует, чтобы контейнер был относительно расположен и только для холста диаграммы.

1

этот вопрос имеет принятый ответ, но это была только часть ответа для меня. Что не ясно из документации, по крайней мере для меня, так это то, что вы должны установите высоту родительского элемента холста, иначе с maintainAspectRatio: false высота будет равна нулю.

это то, что сработало для меня, используя Bootstrap 4 карты (встроенный стиль для иллюстрации):

<div class="card">
    <div class="card-body" style="height: 400px;">
        <canvas id="myChart"></canvas>
    </div>
</div>

затем добавьте это к параметрам:

options: {
    maintainAspectRatio: false
}

By по умолчанию установлено значение true.

Это также позволяет легко использовать адаптивного останова и медиа-запросы для изменения размера диаграммы.

0