2014-01-30 69 views
0

我有2個MS圖,我想要根據所選的單選按鈕進行切換。我遇到了多個問題。使用JavaScript,ASP.NET和VB。使用單選按鈕在2個MS圖之間切換的JavaScript

1)已解決:見下文。現在,單選按鈕將在兩者之間交替。但是,頁面加載同時顯示兩者。一旦我點擊一個單選按鈕,另一個就消失了,它按照它的功能運行。我希望頁面只加載一張圖表。

2)圖表應該「相互替換」,顯示另一個之前的位置。現在,它們是垂直堆疊的,當我使另一個不可見時,只有一大堆空白的地方。

下面是相關的代碼。

圖表組件

<table> 
<tr> 
    <td> 
     <div id="HomeAutoContainer" runat="server"> 
      <div id="BindsAuto" runat="server"> 
       <asp:Chart ID="chTotalBindsAuto" runat="server" Height="230px" Width="280px"> 
        <Series> 
        </Series> 
        <ChartAreas> 
         <asp:ChartArea Name="ChartArea1"> 
         </asp:ChartArea> 
        </ChartAreas> 
       </asp:Chart> 
      </div> 
      <div id="BindsHome" runat="server"> 
       <asp:Chart ID="chTotalBindsHome" runat="server" Height="230px" Width="280px"> 
        <Series> 
        </Series> 
        <ChartAreas> 
         <asp:ChartArea Name="ChartArea1"> 
         </asp:ChartArea> 
        </ChartAreas> 
       </asp:Chart> 
      </div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td style="vertical-align: top" align="center"> 
     <asp:RadioButtonList ID="rdoBindsList" runat="server" RepeatDirection="Horizontal"> 
      <asp:ListItem Value="Auto" Text="Auto" Selected="True">Auto</asp:ListItem> 
      <asp:ListItem Value="Home" Text="Home">Home</asp:ListItem> 
     </asp:RadioButtonList> 
    </td> 
</tr> 

組件的頁面加載

rdoBindsList.Attributes.Add("OnClick", "BindsAutoHomeSwitch('" + rdoBindsList.Items(0).ToString + "','" + BindsAuto.ClientID + "','" + BindsHome.ClientID + "');") 

JavaScript函數

function BindsAutoHomeSwitch(rdoAutoHomeID, chTotalBindsAuto1, chTotalBindsHome1) { 
     var rdoAutoHome = document.getElementById("ctl00_ContentArea_AutoTotalBinds1_rdoBindsList_0"); 
     var chTotalBindsHomeGraph = document.getElementById(chTotalBindsHome1); 
     var chTotalBindsAutoGraph = document.getElementById(chTotalBindsAuto1); 
     var selectedGraphValue 
     if (rdoAutoHome.checked) { 
      selectedGraphValue = "Auto" 
     } 
     else { 
      selectedGraphValue = "Home" 
     } 


     if (selectedGraphValue == "Home") { 
      chTotalBindsAutoGraph.style.visibility = "hidden"; 
      chTotalBindsHomeGraph.style.visibility = "visible"; 

     } 
     if (selectedGraphValue == "Auto") { 
      chTotalBindsAutoGraph.style.visibility = "visible"; 
      chTotalBindsHomeGraph.style.visibility = "hidden"; 
     } 
    } 
+0

現在全部解決。 – niclake

+0

而不是設置'visibility'設置'display:none'。這將隱藏一個div,而不會佔用佈局中的空間。 –

回答

0

LOADING解決:需要添加JavaScript˚F並從頁面加載調用它來隱藏它。

頁面加載

rdoBindsList.Attributes.Add("OnClick", "BindsAutoHomeSwitch('" + rdoBindsList.Items(0).ToString + "','" + BindsAuto.ClientID + "','" + BindsHome.ClientID + "');") 
     Page.ClientScript.RegisterStartupScript(Me.GetType, "HideHome", "HideHomeGraphOnLoad('" + BindsHome.ClientID + "');", True) 

JS

function HideHomeGraphOnLoad(chTotalBindsHome1) { 
     var chTotalBindsHomeGraph = document.getElementById(chTotalBindsHome1); 
     chTotalBindsHomeGraph.style.visibility = "hidden"; 
    } 

圖表疊加方法解決:需要設置,以使其工作在一些div定位。

<table> 
<tr> 
    <td> 
     <div id="HomeAutoContainer" runat="server" style="position:relative; width:280px; height:230px"> 
      <div id="BindsAuto" runat="server" style="position: absolute; top: 0; left: 0;"> 
       <asp:Chart ID="chTotalBindsAuto" runat="server" Height="230px" Width="280px"> 
        <Series> 
        </Series> 
        <ChartAreas> 
         <asp:ChartArea Name="ChartArea1"> 
         </asp:ChartArea> 
        </ChartAreas> 
       </asp:Chart> 
      </div> 
      <div id="BindsHome" runat="server" style="position: absolute; top: 0; left: 0;"> 
       <asp:Chart ID="chTotalBindsHome" runat="server" Height="230px" Width="280px"> 
        <Series> 
        </Series> 
        <ChartAreas> 
         <asp:ChartArea Name="ChartArea1"> 
         </asp:ChartArea> 
        </ChartAreas> 
       </asp:Chart> 
      </div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td style="vertical-align: top;" align="center"> 
     <asp:RadioButtonList ID="rdoBindsList" runat="server" RepeatDirection="Horizontal"> 
      <asp:ListItem Value="Auto" Text="Auto" Selected="True">Auto</asp:ListItem> 
      <asp:ListItem Value="Home" Text="Home">Home</asp:ListItem> 
     </asp:RadioButtonList> 
    </td> 
</tr> 

相關問題