VS2019+ASP.NETCore+圖表


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

實現方式一:通過標記幫助程序將JS代碼傳到前端(前后端分離性好,前端可讀性強,但代碼量大,容易漏JS代碼,不易檢查)

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

2、創建HighChartsTagHelper類

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

4、視圖中的引用,由於布局頁中已經引用Jquery,在此視圖中刪除,重復引用會報錯,F12調試會出現$未定義或者$(...)非函數等的問題,但在模板中引用的Jquery順序要先於<script src="~/js/highchartst.js">,建議將布局頁中對Jquery的引用,放在  @RenderBody()之前,可以放在<head>中。

5、布局頁中的<script>引用一般放在<environment>中,注意include與exclude標識的環境中,對腳本的引用是互斥的關系,例如在include="development"中包含的腳本,只會在調試時使用,在exclude="development"中包含的腳本為非調試環境下使用,兩者是非此即彼的關系

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

實現方式二:直接在前端編寫JS代碼,然后從控制器中將數據傳到前端(前后端分離性差,但JS代碼更直觀,JS代碼更容易控制,適合小白實現)

1、在控制器中,通過ViewBag將數據處理成JS字符串,然后填寫到JS合適的位置,例如

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

2、通過AJAX向控制器請求數據,但同時要注意返回數據的格式

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM