Невозможно сделать диаграмму js отзывчивой

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

У меня есть несколько диаграмм (из chart.js) на одной странице, но мне не удается заставить их реагировать, несмотря на:

responsive: true,

Лучшее реагирование, которое я мог получить, было при увеличении ширины и высоты холста, но на настольных версиях диаграмм отображался весь экран.

Вот это fiddle.net

Кто-нибудь, чтобы помочь мне? Большое спасибо.

Ответы

Ответ 1

Ответ:

1. добавьте div вокруг холста

например:

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

2. добавьте высоту в div-класс в css

.wrapper {
height: 500px !important;
}

(отрегулируйте высоту так, как вы хотите,

Ответ 2

Bootstrap имеет пример страницы, на которой есть диаграмма (с использованием chartjs), которая является отзывчивой. Итак, я бы указал на этот URL, который можно загрузить, и у нас есть адаптивный график.

Пример Dasbhoard, показывающий диаграмму отклика

Ответ 3

Как я видел в скрипке, вы дали фиксированную высоту и ширину для холста.

Попробуйте дать высоту и ширину 70% или 80% для тега холста. Это может решить вашу проблему.

100% могут давать полные большие диаграммы, чтобы попытаться ограничить их до 70-80.

Ответ 4

Вы можете сделать div div контейнера отзывчивым с помощью CSS и сделать svg width: 100% и height:100%

Здесь обновляется скрипка fiddle.net

Ответ 5

Я знаю, что это старый пост, но недавно наткнулся на него.

Пожалуйста, проверьте https://www.chartjs.org/docs/latest/general/responsive.html#important-note

Это в основном говорит, что

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

  2. Обратите внимание, что для того, чтобы вышеуказанный код корректно изменил высоту диаграммы, для параметра keepAspectRatio также должно быть задано значение false. "

Например,

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

Ответ 6

У меня была похожая ситуация, и, основываясь на документации на chartjs, я должен был добавить responsive: true в разделе options, но это не решило мою проблему! Наконец я заметил, что родительским элементом canvas является flexbox ! Удаление, которое решило мою проблему!

PS Официальная документация гласит, что добавление некоторых атрибутов стиля или ширины/высоты к тегу canvas недопустимо! Ниже приведен фрагмент из документов

Следующие примеры не работают:

<canvas height="40vh" width="80vw">: недопустимые значения, размер холста не изменяется (пример) <canvas style="height:40vh; width:80vw">: недопустимое поведение, размер холста изменяется, но становится размыто

Надеюсь, мой ответ может кому-то помочь!

Ответ 7

Я нашел, что с Chart.js вам нужен содержащий div, где вы управляете css (высота/ширина), что поможет реагировать, но не полностью. Существуют некоторые ограничения, особенно с шириной, поскольку содержащий div может оставлять много пробелов на нижней стороне/сторонах, так как холст не будет полностью настраиваться на содержащую ширину в процентах. Это не идеально, но он работает.

Итак, в качестве решения: создайте содержащий div для каждого графика и поместите его с помощью стилей CSS для этого div :)

Ответ 8

Из-за того, что нельзя использовать медиа-запросы для установки width и height, я устанавливаю атрибуты ширины и высоты, определяя мобильный или рабочий стол, как показано ниже

HTML

<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>

javascript - angularjs

$scope.width = '';
$scope.height = '120';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   $scope.width = '100';
   $scope.height = '100';
}

Ответ 9

Вместо указания атрибутов высоты и ширины установите их с помощью стиля:

Вместо

<canvas id="myChart" width="400" height="100"></canvas>

Сделай это

<canvas id="myChart" style="height: 20rem"></canvas>