Размер холста не соответствует моему стилю [дубликат]
Я понимаю, что я довольно поздно в игре, но это очень популярный вопрос, и я недавно нашел подход, который я не видел нигде здесь, поэтому решил, что я его запишу.
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
EDIT: оба элемента должны быть одинаковой ширины для правильной работы.
6 ответов
Вы можете переопределить ширину стиля холста! important ...
canvas{
width:1000px !important;
height:600px !important;
}
также
указать свойство responsive:true, в параметрах ..
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
в добавленных опциях: maintainAspectRatio: false,
-
1– Fellow Stranger 3 June 2016 в 18:45
-
2– Firix 30 October 2017 в 22:49
-
3– Firix 30 October 2017 в 22:55
-
4– Arsman Ahmad 16 July 2018 в 12:12
Работает для меня
responsive:true
maintainAspectRatio: false
Спасибо
В моем случае передача responsive: false под опции решила проблему. Я не уверен, почему все говорят вам делать обратное, тем более, что true является значением по умолчанию.
Вы также можете просто окружить диаграмму контейнером (согласно официальному doc 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
Работает для меня тоже
responsive:true
maintainAspectRatio: false
<div class="row">
<div class="col-xs-12">
<canvas id="mycanvas" width="500" height="300"></canvas>
</div>
</div>
Спасибо
Используйте это, он отлично работает.
<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>
и в options,
responsive:true,