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>后进行解析