Почему canvas chart.js не соответствует заполнению элемента контейнера?

Я использую Chart.js с простой линейной диаграммой, но свойства width и height, вычисленные Chart.js, по-видимому, основаны на общей ширине и высоте родительского элемента, игнорируя дополнение.

var options = {
    maintainAspectRatio: false,
    responsive: true
};

var data = {
    labels: ["", "", "", "", "", "", ""],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var ctx1 = document.getElementById("mychart1").getContext("2d");
var myNewChart = new Chart(ctx1).Line(data, options);

.container {
    padding: 15px 15px 15px 15px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.child {
    display: inline-block;
    border: 1px solid red;
    width:100%;
    height:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>


<div class='container'>
    <canvas id='mychart1' class='child'></canvas>
</div>
<br>
<div class='container'>
    <div class='child'>test</div>
</div>

Ответы

Ответ 1

Мне также нужен отзывчивый холст и эта проблема. Это было мое исправление:

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

Так как Chart.js масштабирует холст до ширины контейнера, игнорируя заполнение, я просто обернул холст в div. div масштабируется к контейнеру с заполнением, учитывая отступы, а затем чувствительный Chart.js canvas масштабируется до div.

Ответ 2

Я тоже искал эту проблему и попал в дело с простым решением.

Я добавил height, чтобы он автоматически регулировал ширину и показывал ее лучше. Если вы действительно хотите, вы могли бы добавить width тоже. Элемент canvas является частью HTML5.

Он не позволяет вводить значения с помощью px. Поэтому игнорируйте это и просто введите числовое значение u.

 <canvas id="myChart" height="80"></canvas>

Ответ 3

В примере jsfiddle измените атрибут responsive на false:

var options = {
    maintainAspectRatio: true,
    responsive: false
};

В предыдущей настройке добавлено 30px как по высоте, так и по ширине, когда вы проверяете элемент с помощью инструментов Chrome dev. Из-за размера холста это не должно быть проблематично, когда дело доходит до изменения размера холста.

ПРИМЕР JSFIDDLE

Ответ 4

Лучшим решением является использование .container {box-sizing: border-box;}

Ответ 5

Я завернул вход, а затем использовал этот CSS.

.chart-container {
  box-sizing:border-box;
  margin:2%;
  width:96%;
}

Это удерживает его от края и реагирует. Я использовал 2%, но вы можете использовать любые проценты, соответствующие вашему расположению.

Ответ 6

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

Chart.defaults.global.responsive = true;

"Теперь, каждый раз, когда мы создаем диаграмму, параметры .responsive будут истинными".

Источник: http://www.chartjs.org/docs/