javascript를 사용하여 동일한 위치에 여러 캔버스

Question

동일한 위치에 여러 캔버스를 표시하는 모듈 중 하나의 응용 프로그램을 만들려고합니다. 이 캔버스는 그래프를 표시하는 데 사용됩니다. 나는 2 개의 단추가있다 : 원형과 막대기 :

원형을 클릭하면 파이 차트가 표시되어야한다. 막대를 클릭하면 막대 그래프가 표시됩니다. 나는 다음과 같은 접근 방법을 사용하고있다.

1. 같은 위치에 2 개의 캔버스를 렌더링한다.

   .wrapper canvas { 
       position: absolute; 
       top: 0px; 
       left: 0px; 
       visibility:hidden; 
   } 
   

2. 파이 버튼에는 막대 그래프가 있고 파이가 표시됩니다. 같은 버튼 바에 간다.

   $("input[type='radio']").change(function(){ 
       var whChart = $('input[name="radio-view"]:checked').val(); 
       var canpie = document.getElementById('pie4');//$("canvas[name='pie4'][0]"); 
       var canbar = document.getElementById('pie41');//$("canvas[name='pie4'][0]"); 
       if(whChart == "Pie"){ 
        RGraph.Effects.jQuery.Snap(pie4); 
        canpie.style.visibility='visible'; 
        canbar.style.visibility='hidden'; 
       } 
       else if(whChart == "Bar"){ 
        RGraph.Effects.jQuery.Snap(pie41); 
        canpie.style.visibility='hidden'; 
        canbar.style.visibility='visible'; 
       } 
   }); 
   

의 HTML

<div class="wrapper" style="text-align:center;"> 
    <canvas id="pie4" width="450" height="250" style="background:black; z-index: 1; visibility:visible; ">[No canvas support]</canvas> 
    <canvas id="pie41" width="450" height="250" style="background:red; z-index: 2;">[No canvas support]</canvas> 
</div> 

파일 그러나 문제는이 2 개의 캔버스가 다른 아래 하나를 표시하는 것입니다. 동일한 장소가 중복되지 않습니다.

더블 버퍼링과 관련된 다른 게시물을 확인하고 첫 번째 캔버스 높이와 너비를 '0'으로 만드는 등의 다른 옵션을 시도했지만 작동하지 않는 것 같습니다. 이 문제에 도움을 줄 수있는 사람을 기쁘게 할 수있었습니다. 이후로 나는이 자바 스크립트를 처음 접했기 때문에.

p.s : 죄송합니다. 이것은 내 첫 번째 게시물입니다. 나는 많은 실수와 정보가 있다는 것을 알고있다. 필요한 것이 무엇인지 알려 주시면 알려 드리겠습니다.

Answer 1

문제는 가시성이 공간을 유지하고 공간을 유지하지 않는 디스플레이를 사용하고자하는 것입니다.

var pieState = (whChart == "Pie") ? "block" : "none"; 
var barState = (whChart == "Bar") ? "block" : "none"; 
canpie.style.display = pieState; 
canbar.style.display = barState; 

에 대한 설명이 stackoverflow question를 참조하십시오. 당신이 jQuery를 사용하는 것 때문에

, 당신은 단지 솔루션 모두 일을 jQuery의 show()/hide() 또는 toggle()