使用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 很陌生。

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