1

モジュールの1つが同じ場所に複数のキャンバスを表示しているアプリケーションを作成しようとしています。このキャンバスは、グラフを表示するために使用されます。私は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」にするなどの他のオプションも試しましたが、機能しないようです。誰かがこの問題で助けてくれませんか。私はこのJavaScriptに非常に慣れていないので。

ps：申し訳ありませんがこれは私の最初の投稿です。間違いや情報が不足していることがたくさんあることを私は知っています。他に必要なものがあれば教えてください。

4

1 に答える 1

2

問題は、可視性がスペースを維持することです。スペースを維持しないディスプレイを使用する必要があります。

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

説明については、このスタックオーバーフローの質問を参照してください。

jQueryを使用しているように見えるので、jQueryのshow（） / hidden（）またはtoggle（）を使用できます。

于 2012-10-16T13:12:45.507 に答える