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";
}
}
現在全部解決。 – niclake
而不是設置'visibility'設置'display:none'。這將隱藏一個div,而不會佔用佈局中的空間。 –