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

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

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

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

Fellow Stranger

Ответов: 10

Ответы (10)

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

canvas{

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

}

также

укажите responseive: true, свойство в разделе options ..

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

добавлено обновление по опциям: keepAspectRatio: false,

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

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

У меня сработало следующее, но не забудьте указать это в параметре "options".

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

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

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

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

Воспользуйтесь этим, все работает нормально.


и ниже варианты,

responsive:true,

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

варианты: {
     аспектRatio: 4 // (ширина / высота)
}

Вы можете создать div, чтобы обернуть тег холста,

    
.grafico{ width: 400px !important; }

любые изменения в опциях js диаграммы

var myChart = new Chart(ctx, {
    type: 'bar', //doughnut, bar, line, radar, pie, polarArea
    data: data,
    options: {

      scales: {
        y: {
          beginAtZero: true,
          stepSize: 1
        }

      }
    },
  });
};

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

CSS

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

и с опциями

responsive:true
maintainAspectRatio: false

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

Код:

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

2022 WebDevInsider