VS2019+ASP.NETCore+圖表

時間 2019-12-14

標籤 vs2019+asp.netcore asp netcore 圖表欄目 ASP 简体版

原文原文鏈接

原帖學習踩坑：https://www.cnblogs.com/fzqm-lwz/p/9704973.html，主要根據大佬原帖內容，實現嘗試，進行一些修改：html

實現方式一：經過標記幫助程序將JS代碼傳到前端（先後端分離性好，前端可讀性強，但代碼量大，容易漏JS代碼，不易檢查）前端

一、Install-Package Microsoft.AspNetCore.Razor.Runtime [序包管理器控制檯]中對項目添加引用後端

二、建立HighChartsTagHelper類跨域

三、在_ViewImports中添加對標記幫助程序的引用 @addTagHelper *,[HighChartsTagHelper的命名空間]，對於標記幫助程序的使用，可參見官方文檔https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/authoring?view=aspnetcore-2.2mvc

四、視圖中的引用，因爲佈局頁中已經引用Jquery,在此視圖中刪除，重複引用會報錯，F12調試會出現$未定義或者$(...）非函數等的問題，但在模板中引用的Jquery順序要先於<script src="~/js/highchartst.js">,建議將佈局頁中對Jquery的引用，放在 @RenderBody()以前，能夠放在<head>中。前後端分離

五、佈局頁中的<script>引用通常放在<environment>中，注意include與exclude標識的環境中，對腳本的引用是互斥的關係，例如在include="development"中包含的腳本，只會在調試時使用，在exclude="development"中包含的腳本爲非調試環境下使用，二者是非此即彼的關係函數

六、注意將http改成https,或者將其下載到本地，否者可能出現跨域訪問的限制佈局

實現方式二：直接在前端編寫JS代碼，而後從控制器中將數據傳到前端（先後端分離性差，但JS代碼更直觀，JS代碼更容易控制，適合小白實現）學習

一、在控制器中，經過ViewBag將數據處理成JS字符串，而後填寫到JS合適的位置，例如spa

series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [@ViewBag.Series3] //此處是在控制器中封裝好的字符串，必定要注意，格式要徹底與直接填寫數據時同樣，不然Highcharts不解析
}]；

二、經過AJAX向控制器請求數據，但同時要注意返回數據的格式

小結：以上兩種方式的原理根本上是同樣的，都是將數據和JS代碼按HighCharts格式組裝好後返回至前臺，而後經過加載<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>後進行解析