График Charts.js не масштабируется до размера холста

Я пытаюсь сделать график с Charts.js(текущий - это просто простой пример, который я пытаюсь получить, несколько взятый из документации Chart.js), и график не масштабируется до размер холста, который я ему даю. Вот весь соответствующий код.

Чтобы импортировать его:

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

Затем я подключаю его к файлу javascript следующим образом:

<script type="text/javascript" src="js/stats_tab.js"></script>

У меня установлен мой холст:

        <div id="graph_2015" class ="stats_box">
            <h4>Graph 2015</h4>
            Text
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>

И затем, наконец, в stats_tab.js, у меня есть следующий код:

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
}

График отображается хорошо, но он отказывается масштабироваться до размера холста, который я ему дал. Также нет никакого css, относящегося к любому из задействованных div. Функция проверки на хроме позволяет мне знать, что конечный график равен 676 на 676 вместо 200 200, которые я указал. Не совсем уверен, что происходит.

Спасибо!

Ответ 1

Свойство width и height, которое вы устанавливаете для canvas, работает только в том случае, если отзывчивый режим Chartjs является ложным (что по умолчанию является истинным). Измените свой stats_tab.js на это, и он будет работать.

    window.onload=function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    }

Ответ 2

Важным моментом является следующее: width и height свойства не являются размером в px, а отношением.

<canvas id="myChart" width="400" height="400"></canvas>

В этом примере это соотношение 1:1. Итак, если ваш html contenair равен 676 px, тогда ваш график будет 676 * 675px
Это может объяснить некоторые распространенные ошибки.

Вы можете отключить эту функцию, установив maintainAspectRatio в значение false.

Ответ 3

В ваших настройках установите для параметра maintainAspectRatio значение false и responsive на true. Сначала будет пытаться масштабировать диаграмму в соответствии с размерами вашего холста. Если холст не подходит к экрану, то есть на мобильных телефонах, ваша диаграмма будет повторно масштабирована, чтобы поместиться на странице.

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}

Ответ 4

Это должно работать. В основном, просто добавьте свойства ширины и высоты в ваш javascript:

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

Ссылка: Изменение размера холста Chart.js

Ответ 5

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

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

Добавьте это к своим стилям страницы (8px - это личные предпочтения. Измените при необходимости):

<style type="text/css">
    #canvas-holder {
        background-color: #FFFFFF;
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
</style>

Для соответствующих Div:

<div id="canvas-holder">
    <canvas id="chart-area"></canvas>
</div>

Ответ 6

Если ваш элемент <canvas> не имеет width & height "атрибут" (не атрибут css). Попробуйте установить для каждого из них значение 1 (поскольку это просто соотношение)

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>

Ответ 7

Следующие работали для меня, и я смог сохранить отзывчивость графика!

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;

Ответ 8

Реальная проблема заключается в том, что холст будет реагировать на изменения своего родителя. Я хотел сохранить отзывчивость. Итак, что-то вроде этого решит проблему:

<div style="width:50%">
    <canvas id="myChart"></canvas>
</div>

Ответ 9

У меня была точно такая же проблема, когда мой график не менялся должным образом. Чтобы обойти эту проблему, я сделал две вещи.

Установите стиль тега canvas на ширину и высоту 100%. Это обеспечит 100% ширину и высоту контейнеров.
Для значения параметра установите отзывчивый: true & keepAspectRatio: false. Это позволит убедиться, что график реагирует на обновления по размеру, игнорируя соотношение сторон.

ниже приведен код, который я использовал:

css
#myGraph {
width: 100%;
height: 100%;
}

html
<canvas id="myGraph" />