JavaScript使用单选按钮在2毫秒图表之间切换

我有两个MS图表，我想在它们之间切换，这取决于选择了哪个单选按钮。我对此有很多问题。使用JavaScript、ASP.NET和VB

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>

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";
        }
    }

---

加载已解决：需要添加一个JavaScript函数，并从页面加载中调用它来隐藏它

页面加载

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

JS

解决了图表堆叠问题：需要在一些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>

汽车
家

---

而不是设置

可见性

设置

显示：无

。这将隐藏div，而不会占用布局中的空间。

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

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