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

В (ошибка веб-браузера Android WebView HTML5). Я разместил вопрос о построении графиков с использованием библиотеки Graph.js. Проблема, которую я сейчас имею в виду, заключается в том, что если я вызываю функцию для построения графика несколько раз, размер холста изменяется каждый раз. Каждый раз, когда график перерисовывается на том же холсте, его размер также изменяется. Я также попытался установить размер холста, но безуспешно.

В чем может быть причина? Почему размер холста изменяется каждый раз?

ОТВЕТЫ

Ответ 1

У меня было много проблем с этим, потому что после всего этого моя линейная графика выглядела ужасно при наведении мыши, и я нашел более простой способ сделать это, надеюсь, это поможет :)

Используйте эти параметры Chart.js:

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,

Ответ 2

Что происходит, Chart.js умножает размер холста, когда он вызывается, а затем пытается масштабировать его обратно с помощью CSS, целью которого является предоставление графиков с более высоким разрешением для устройств с высоким разрешением на дюйм.

Проблема заключается в том, что он не понимает, что уже сделал это, поэтому, когда он называется последовательным временем, он умножает уже (удвоенный или любой) размер AGAIN, пока все не начнет ломаться. (Что на самом деле происходит, это проверка того, должно ли оно добавлять больше пикселей к холсту, изменяя атрибут DOM для ширины и высоты, если он должен, умножая его на некоторый коэффициент, обычно 2, а затем меняя это, а затем меняя стиль css чтобы поддерживать тот же размер на странице.)

Например, когда вы запускаете его один раз, а ширина и высота холста равны 300, он устанавливает их в 600, а затем изменяет атрибут стиля до 300... но если вы запустите его снова, он увидит, что DOM ширина и высота - 600 (проверьте другой ответ на этот вопрос, чтобы понять, почему), а затем задает значение 1200 и ширину и высоту css до 600.

Не самое элегантное решение, но я решил эту проблему, сохраняя расширенное разрешение для устройств сетчатки, просто установив ширину и высоту холста вручную перед каждым последующим вызовом Chart.js

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

Ответ 3

Это работает для меня:

<body>
    <form>
        [...]
        <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
            <canvas id="cv_values"></canvas>

            <script type="text/javascript">
                var indicatedValueData = {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            [...]
                        };

                var cv_values = document.getElementById("cv_values").getContext("2d");
                var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
            </script>
        </div>
    </form>
</body>

Существенным фактом является то, что мы должны установить размер холста в div-теге.

Ответ 4

В IOS и Android браузер скрывает панель инструментов, когда вы прокручиваете, тем самым изменяя размер окна, которое заставляет графические диаграммы приводить к изменению размера графика. Решение состоит в том, чтобы поддерживать соотношение сторон.

var options = { 
    responsive: true,
    maintainAspectRatio: true
}

Это должно решить вашу проблему.

Ответ 5

Как предложил jcmiller11, настройка ширины и высоты помогает. Немного более приятное решение состоит в том, чтобы извлечь ширину и высоту холста, прежде чем рисовать диаграмму. Затем используйте эти цифры для установки диаграммы при каждом последующем повторном рисовании диаграммы. Это гарантирует, что в javascript-коде нет констант.

ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;

function drawchart() {
    ctx.canvas.width = ctx.canvas.originalwidth;
    ctx.canvas.height = ctx.canvas.originalheight;

    var chartctx = new Chart(ctx);
    myNewBarChart = chartctx.Bar(data, chartSettings); 
}

Ответ 6

Я должен был использовать комбинацию нескольких ответов здесь с некоторыми незначительными изменениями.

Во-первых, необходимо поместить элемент canvas в контейнер уровня блока. Я говорю вам: не позволяйте элементу canvas иметь братьев и сестер; пусть это будет одинокий ребенок, потому что он упрямый и испорченный. (Обертка может не нуждаться в каких-либо ограничениях по размеру, но для безопасности может быть полезно применить к ней максимальную высоту.)

Убедившись, что предыдущие условия соблюдены, при запуске диаграммы убедитесь, что используются следующие параметры:

var options = { 
    "responsive": true,
    "maintainAspectRatio": false
}

Если вы хотите отрегулировать высоту диаграммы, сделайте это на уровне элемента canvas.

<canvas height="500"></canvas>

Не пытайтесь общаться с ребенком любым другим способом. Это должно привести к удовлетворительному, правильно выложенному графику, который мирно лежит в своей кроватке.

Ответ 7

У меня была аналогичная проблема, и я нашел ваш ответ. В конце концов я пришел к решению.

Похоже, что источник Chart.js имеет следующее (предположительно, потому что он не должен повторно отображать и совсем другой график в том же холсте):

    //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicePixelRatio) {
    context.canvas.style.width = width + "px";
    context.canvas.style.height = height + "px";
    context.canvas.height = height * window.devicePixelRatio;
    context.canvas.width = width * window.devicePixelRatio;
    context.scale(window.devicePixelRatio, window.devicePixelRatio);
}

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

Надеюсь, что это поможет!

Ответ 8

Если у кого-то возникают проблемы, я нашел решение, которое не требует отклика и т.д.

Просто закройте свой холст в контейнере div (без стилей) и reset содержимое div на пустой холст с идентификатором перед вызовом конструктора диаграммы.

Пример:

HTML:

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

JS:

$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual

Ответ 9

Я пытался изменить размер холста с помощью jQuery, но он не работал хорошо. Я думаю, что CSS3 - лучший вариант, который вы можете примерить, если хотите навести курсор на определенный уровень.

Следующая опция наведения из другой ссылки на кодовую панель:

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

Перейдите по моей ссылке на кодовую панель:

https://codepen.io/hitman0775/pen/XZZzqN

Ответ 10

У меня была проблема масштабирования с использованием Angular CLI. Был способен заставить его работать, удалив эту строку из index.html:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

а затем в файле angular -cli.json в разделе сценариев, используя это:

"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]

Источник: mikebarr58

Ответ 11

У меня была такая же проблема. Я смог решить это, установив опцию:

responsive: false,
maintainAspectRatio: true,
showScale: false,

Ответ 12

Добавьте div и это решит проблему

<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>

Ответ 13

 let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
 let width = canvasBox.clientWidth;
 let height = canvasBox.clientHeight;
 let charts = ReactDOM.findDOMNode(this.refs.charts);
 let ctx = charts.getContext('2d');
 ctx.canvas.width = width;
 ctx.canvas.height = height;
 this.myChart = new Chart(ctx);