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

88

Я пробую пример кода для Chart.js, приведенный в документации .

Ширина и высота указываются в элементе холста в размере 400 пикселей / 400 пикселей.

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

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

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

chart.js

— Товарищ незнакомец
источник

93

Вы можете изменить ширину стиля холста! 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

— KpTheConstructor
источник

13

Спасибо, вы maintainAspectRatio: falseсделали диаграмму доступной для просмотра. Но все же срезал правую сторону. Решение подобных проблем с помощью их собственного базового примера кода заставляет меня задуматься о том, что chart.js - хороший выбор. (Правая сторона все еще отрезана ...)

— Fellow Stranger

Это решает проблему размера графа, граф не масштабируется под него. Есть ли способ установить размер графика из Chart.js?

— Фирикс

7

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

— Фирикс

2

Спасибо. Ты maintainAspectRatioдействительно мне помог.

— Arsman Ahmad

Использование "! Important" - неправильный способ решения этой проблемы, даже если оно работает. Решение @Nicolas ниже «оборачивания холста в div» - лучший способ, так как мы могли бы контролировать изменение размера холста так, как мы хотим.

— Abhishek Boorugu

54

Вы также можете просто окружить диаграмму контейнером (согласно официальному документу 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

— Николас
источник

1

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

— Джон Доэрти

Для того, чтобы это работало, контейнер-диаграмма должен располагаться относительно друг друга.

— Санджу

у меня работает, но только с !importantпроектом Angular

— Артур Гудиев

23

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

— Сурьма
источник

1

Тоже самое. Настройка responsive: trueполностью исказила внешний вид диаграммы.

— Пол

у меня работает, но только !importantв моем проекте Angular

— Артур Гудиев

4

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

responsive:true
maintainAspectRatio: false


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

Благодарю вас

— субраманья46
источник

2

Я не могу поверить, что никто не говорил об использовании относительного родительского элемента.

Код:

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

Источники: Официальная документация.

— Р. Гурунг
источник

0

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

— Укусер32
источник

0

Приведенное ниже сработало для меня, но не забудьте указать это в параметре «Параметры».

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

— Дазех
источник

0

В моем случае это помогло:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

— Омид Н
источник

0

Вы можете изменить в aspectRatioсоответствии с вашими потребностями:

options:{
     aspectRatio:4 //(width/height)
}

— Яшвендар Бадсивал
источник

Вы можете пояснить, как это работает? 4это не соотношение сторон. В вашем комментарии говорится, (width/height)но неясно, как это следует применять. Есть ли способ передать это как набор? Или вы буквально хотите разделить предложенную ширину на предложенную высоту, чтобы, например, получилось 3: 4 0.75?

— Джереми Кейни

-3

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

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

и под options,

responsive:true,

— Удара
источник