使用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圖表

回答

相關問題