[html] Chart.js 캔버스 크기 조정

Question 1

( Android WebView HTML5 캔버스 오류 )에서 Graph.js 라이브러리를 사용하여 그래프를 그리는 것과 관련된 질문을 게시했습니다. 내가 가진 문제는 그래프를 여러 번 그리는 함수를 호출하면 매번 캔버스 크기가 조정된다는 것입니다. 그래프가 동일한 캔버스에 다시 그려 질 때마다 크기도 변경됩니다. 캔버스 크기 설정도 시도했지만 성공하지 못했습니다.

이유가 무엇일까요? 캔버스 크기가 매번 조정되는 이유는 무엇입니까?

Question 2

마우스를 가져갈 때 선 그래픽이 끔찍해 보였고 더 간단한 방법을 찾았 기 때문에 많은 문제가있었습니다.

다음 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,

Question 3

무슨 일이 일어나고 있는지 Chart.js는 호출 될 때 캔버스의 크기를 곱한 다음 CSS를 사용하여 다시 축소하려고 시도합니다. 목적은 고해상도 장치에 더 높은 해상도의 그래프를 제공하는 것입니다.

문제는 그것이 이미 이것을 수행했다는 것을 깨닫지 못한다는 것입니다. 그래서 연속적으로 호출 될 때, 일이 깨지기 시작할 때까지 이미 (두 배가 된 또는 무엇이든) 크기를 다시 곱합니다. (실제로 일어나는 일은 너비와 높이의 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);

Question 4

이것은 나를 위해 작동합니다.

<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-tag에서 캔버스의 크기를 설정해야한다는 것입니다.

Question 5

IOS 및 Android에서 브라우저는 스크롤 할 때 도구 모음을 숨겨서 차트 크기를 조정하기 위해 차트를 리드하는 창의 크기를 변경합니다. 해결책은 종횡비를 유지하는 것입니다.

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

이것은 당신의 문제를 해결할 것입니다.

Question 6

jcmiller11이 제안했듯이 너비와 높이를 설정하면 도움이됩니다. 약간 더 좋은 해결책은 차트를 그리기 전에 캔버스의 너비와 높이를 검색하는 것입니다. 그런 다음 차트를 다시 그릴 때마다 차트를 설정하는 데 해당 번호를 사용합니다. 이렇게하면 자바 스크립트 코드에 상수가 없습니다.

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);
}

Question 7

여기에 여러 가지 답변을 약간의 조정과 함께 사용해야했습니다.

먼저 블록 레벨 컨테이너 내에서 캔버스 요소를 래핑 해야 합니다. 내가 할, 당신에게 말을 하지 캔버스 요소가 어떤 형제를 보자; 가되는 것이, 외로운 자식하게 고집 하고 버릇 . (래퍼에는 크기 제한이 필요하지 않을 수 있지만 안전을 위해 최대 높이를 적용하는 것이 좋습니다.)

이전 조건이 충족되었는지 확인한 후 차트를 시작할 때 다음 옵션이 사용되는지 확인하십시오.

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

차트의 높이를 조정하려면 캔버스 요소 수준에서 조정하십시오.

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

다른 방식으로 아동을 대하려고하지 마십시오. 이는 만족스럽고 적절하게 배치 된 차트를 생성해야하며, 그 차트는 침대에 평화롭게 머물러 있습니다.

Question 8

비슷한 문제가 있었고 답을 찾았습니다. 결국 해결책을 찾았습니다.

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 요소의 크기가 여러 번 변경되어 크기가 다시 조정됩니다.

도움이 되었기를 바랍니다.