首页 技术 正文
技术 2022年11月19日
0 收藏 447 点赞 4,737 浏览 1201 个字

原帖学习踩坑: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、视图中的引用,VS2019+ASP.NETCore+图表由于布局页中已经引用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>后进行解析

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,077
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,552
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,400
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,812
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,894