多個畫布在相同的位置使用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> 

但問題是這兩個帆布正在顯示一個下面的另一個。不在同一個地方重疊。

我檢查了與雙緩衝相關的其他帖子，並嘗試了其他選項，如將第一個畫布高度和寬度設置爲「0」，但似乎不起作用。可以請某人幫忙解決這個問題。由於我對這個JavaScript非常陌生。

頁數：對不起，這是我的第一篇文章。我知道有很多錯誤和信息丟失。如果你讓我知道是否有其他需要，我會提供。

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