Programing

Chart.js 캔버스 크기 조정

lottogame 2020. 10. 11. 09:05
반응형

Chart.js 캔버스 크기 조정


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

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


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

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

무슨 일이 일어나고 있는지 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);

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

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


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

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

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


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

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

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

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

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

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

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

다른 방식으로 아동을 다루려고하지 마십시오. 이는 만족스럽고 적절하게 배치 된 차트를 생성하여 침대에 평화롭게 유지됩니다.


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

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

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


If anyone is having problems, I found a solution that doesn't involve sacrificing responsiveness etc.

Simply wrap your canvas in a div container (no styling) and reset the contents of the div to an empty canvas with ID before calling the Chart constructor.

Example:

HTML:

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

JS:

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

I tried to Resize Canvas using jQuery but it din't work well. I think CSS3 is the best option you can try on, if you want on hover zooming at certain level.

Following hover option from other codepan link:

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

Follow my codepan link:

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


I had the same kind of scaling issue's using Angular CLI. Was able to get it working by removing this line from the index.html:

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

and then in the angular-cli.json file, in the scripts section, using this:

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

Source: mikebarr58


I was having the same problem. I was able to solve it by setting option:

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

And in css, set the width of the container div the same as the canvas:

    #canvasContainer { 
      width: 300px;
    }
    
    canvas {
      width: 300px;
    }


Add div and it will solve the problem

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

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

참고URL : https://stackoverflow.com/questions/19847582/chart-js-canvas-resize

반응형