0

我在页面上使用 Shield 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>

问题是，当我单击按钮时，什么也没有发生。

4

3 回答 3

0

@用户2492467，

您需要隐藏图表还是需要清除其内容？如果只是隐藏图表，克里斯建议的方法就可以了。但是，如果您需要从页面中彻底清除图表，那么清除其内容是不够的。只有删除呈现的图表标记才会为内存泄漏打开大门，因为对 DOM 节点的引用可能会保留在图表 javascript 组件中。

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

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

请注意，您仍然需要使用 MVC 包装器的.Name("DataSpot")方法为图表命名，就像 Ed 建议的那样。这将为您的图表的 HTML 元素提供一个 ID，您可以使用该 ID 与 jQuery 一起查找图表实例。

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

于 2013-08-19T16:26:08.197 回答
0

实际上发生了一些事情，显然不是你需要的事情。这是因为您需要通过引用其容器来清除渲染的图表。这

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

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

应该改为

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

或者您可以将图表重命名为

 .Name("DataSpot ")

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

于 2013-08-16T16:38:21.517 回答
0

怎么样：

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

您还应该更新您的按钮：

<button type="button" onclick="HideChart()" value="Hide Chart" />
于 2013-08-16T13:19:37.220 回答