使用JS函数隐藏屏蔽ASP.NET MVC图表

我在页面上使用屏蔽ASP.NET MVC图表。我需要图表最初为我的访问者显示数据，并且我需要通过单击相应的按钮为用户提供隐藏图表的可能性。为此我使用下面的函数：使用JS函数隐藏屏蔽ASP.NET MVC图表

<script> 
    function HideChart() { 
     document.getElementById("DataSpot").innerHTML = ""; 
    } 
</script>

而且我把图表如下：

<p id="DataSpot"> 
@(Html.ShieldChart() 
    .Name("chart") 
    .PrimaryHeader(header => header.Text("Profile Hits")) 
    .Export(false) 
    .AxisX(axisX => axisX 
    ……….. 
) 
</p> 
<button onclick="HideChart()">Hide Chart</button>

的问题是，当我按一下按钮，没有任何反应。

来源

2013-08-16 user2492467

@ user2492467，

你需要隐藏图表或你需要消灭它的内容？如果只是隐藏图表，Chris建议的方法就可以正常工作。但是，如果您需要不可撤销地从页面中清除图表，则清除其内容是不够的。只删除呈现的图表标记会打开内存泄漏的大门，因为对DOM节点的引用可能会保留在图表javascript组件中。

更好的方法是找到javascript组件实例并调用它的.destroy()方法。这将确保该组件是完全销毁，没有内存泄漏：

$("#DataSpot").swidget().destroy();

请注意，您仍然需要使用MVC包装的.Name("DataSpot")方法就像埃德建议给您的图表的名称。这将为图表的HTML元素提供一个ID，您可以使用该ID来查找图表实例。

.swidget()方法是由Shield UI javascript框架添加的标准jQuery扩展方法。它返回与由jQuery选择器匹配的元素相关联的javascript组件实例。这就是你如何找到图表实例。

来源

2013-08-19 16:26:08 defrost

我最初只想隐藏图表，但第二个想法，用户将无法让他们回来的选项，除非他刷新页。在这种情况下，我最好完全删除图表。感谢您向我展示如何正确地做到这一点。 – user2492467

如何：

<script> 
    function HideChart() { 
     document.getElementById('DataSpot').style.display='none'; 
    } 
</script>

你也应该更新您的按钮：

<button type="button" onclick="HideChart()" value="Hide Chart" />

来源

2013-08-16 13:19:37

其实有事情发生，显然不是你所需要的东西。这是因为您需要通过引用其容器来清除呈现的图表。

元素是好的，如果你在你的函数中放一些文本并执行它，你会看到它会出现在适当的位置。但是要隐藏图表，您需要使用它的名称。换句话说，下面的语句：

document.getElementById("DataSpot").innerHTML = "";

应改为

document.getElementById("chart").innerHTML = "";

，或者你可以重命名图表

.Name("DataSpot ")

，并删除P元素在这两种情况下，因为它使没用。

来源

2013-08-16 16:38:21

+1显示我我需要设置一个名称从MVC包装 – user2492467

使用JS函数隐藏屏蔽ASP.NET MVC图表

回答

相关问题