Question

我想在表格单元格中使用z-index将两个Charts放在另一个上，这样我就可以一次显示一个图表。刷新图表时，我想用可见图表下方的图表更新数据，然后使可见的开关z-index避免闪烁......但似乎没有用，也不知道我做错了什么：

这是我的CSS

td.tdchart
{
width: 800px;
position: relative;
z-index: 100;
display: block;
}

.chartHidden
{
z-index: 200;
position: absolute;
top: 0; 
left: 0; 
width: 100%; 
height: 100%
}

.chartVisible
{
z-index: 300;
position: absolute;
top: 0; 
left: 0; 
width: 100%; 
height: 100%
}

这是部分asp页面

<table>
<tr>
<td class="tdchart">
<div id="pChart1" runat="server" class="chartVisible">
<asp:Chart ID="Chart1" ...> </asp:Chart>
</div>

<div id="pChart1" runat="server" class="chartHidden">
<asp:Chart ID="Chart1" ...> </asp:Chart>
</div>
</td>
</tr>
</table>

Ajax计时器中的asp代码

pChart2.Attributes.Add("class", "chartVisible");
pChart1.Attributes.Add("class", "chartHidden");

Answer 1

这是一个很长的镜头，因为我暂时没有在Web Forms项目上工作，我无法运行Web应用程序。

我真的认为你不需要2张相同的图表。你应该永远不必重复这样的代码以避免闪烁，它变得很难管理并且效率不高。保持你的代码干（不要重复自己）。

话虽如此，我认为你应该删除第二张图表，并专注于使用<asp:UpdatePanel>正确更新第一张图表而不会闪烁。

可能的修复

我注意到您的UpdatePanel正在使用条件设置：

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

如果启用此功能，则需要触发Async回发手动。通过在代码中调用UpdatePanel2.Update()或设置触发器。我没有看到其中任何一个（但我可能错过了一些东西）。

我建议你在第二个计时器下面加上这个：

        ...
        <asp:Timer ID="Timer2" runat="server" Interval = "10000" OnTick="Timer2_Tick" 
            Enabled="False"></asp:Timer>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick" />
        </Triggers>
    </asp:UpdatePanel>

我相信当计时器打勾并更新你的图表时，这应该触发UpdatePanel。

但是请注意这是一个未经测试的修复，我可能完全遗漏了一些东西

两个asp的z-index：图表控件不起作用？

1 个答案: