Установка ширины и высоты

Я пытаюсь использовать код примера для Chart.js указанный в документах.

Ширина и высота указаны в строке на элементе canvas при 400px/400px.

Но при рендеринге диаграммы он взорвался до полной ширины страницы и отрезал крайний правый конец.

См. пример

Как/где я должен контролировать ширину/высоту диаграммы?

This is some bogus text because SO prohibits linking to Codepen otherwise.

Ответы

Ответ 1

Вы можете переопределить ширину стиля холста! important...

canvas{

  width:1000px !important;
  height:600px !important;

}

также

укажите свойство responsive:true, в параметрах..

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

обновление по добавленным параметрам: maintainAspectRatio: false,

ссылка: http://codepen.io/theConstructor/pen/KMpqvo

Ответ 2

Вы также можете просто окружить диаграмму контейнером (согласно официальному документу http://www.chartjs.org/docs/latest/general/responsive.html#important-note)

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

и с опциями

responsive:true
maintainAspectRatio: false

Ответ 3

В моем случае передача responsive: false под опции решила проблему. Я не уверен, почему все говорят вам делать обратное, тем более, что true является значением по умолчанию.

Ответ 4

Работает для меня

responsive:true
maintainAspectRatio: false

Спасибо

Ответ 5

У меня тоже работает

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

спасибо

Ответ 6

Не упомянуто выше, но использование max-width или max-height на элементе canvas также возможно.

Ответ 7

Используйте это, он отлично работает.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

и под options,

responsive:true,