原帖学习踩坑: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>后进行解析

VS2019+ASP.NETCore+图表的更多相关文章

  1. ASP.NETCORE MVC模块化

    ASP.NETCORE MVC模块化编程 前言 记得上一篇博客中跟大家分享的是基于ASP.NETMVC5,实际也就是基于NETFRAMEWORK平台实现的这么一个轻量级插件式框架.那么今天我主要分享的 ...

  2. Asp.NetCore之组件写法

    本章内容和大家分享的是Asp.NetCore组件写法,在netcore中很多东西都以提供组件的方式来使用,比如MVC架构,Session,Cache,数据库引用等: 这里我也通过调用验证码接口来自定义 ...

  3. Server in ASP.NET-Core

    .NET-Core Series Server in ASP.NET-Core DI in ASP.NET-Core Routing in ASP.NET-Core Error Handling in ...

  4. 为ASP.NetCore程序启用SSL

    紧接着上一篇搭建连接MySql的三层架构的ASP.NetCore2.0的WebApi的案例,这篇来实现为ASP.NetCore启用SSL支持 由于ASP.NetCore默认服务器Kestrel不像ii ...

  5. AutoMapper在asp.netcore中的使用

    # AutoMapper在asp.netcore中的使用  automapper 是.net 项目中针对模型之间转换映射的一个很好用的工具,不仅提高了开发的效率还使代码更加简洁,当然也是开源的,htt ...

  6. ASP.NETCore的Kestrel服务器

    什么是Kestrel服务器 Kestrel是开源的(GitHub提供的源代码),事件驱动的异步I / O服务器,用于在任何平台上托管ASP.NET应用程序.这是一个监听服务器和一个命令行界面.您将侦听 ...

  7. Asp.NetCore轻松学-使用Supervisor进行托管部署

    前言 上一篇文章 Asp.NetCore轻松学-部署到 Linux 进行托管 介绍了如何在 Centos 上部署自托管的 .NET Core 应用程序,接下来的内容就是介绍如何使用第三方任务管理程序来 ...

  8. Asp.NetCore轻松学-部署到 IIS 进行托管

    前言 经过一段时间的学习,终于来到了部署服务这个环节,.NetCore 的部署方式非常的灵活多样,但是其万变不离其宗,所有的 Asp.NetCore 程序都基于端口的侦听,在部署的时候仅需要配置侦听地 ...

  9. asp.netcore 深入了解配置文件加载过程

    前言     配置文件中程序运行中,担当着不可或缺的角色:通常情况下,使用 visual studio 进行创建项目过程中,项目配置文件会自动生成在项目根目录下,如 appsettings.json, ...

随机推荐

  1. MVC上传文件并模拟进度条

    进度条样式和JS <style type="text/css"> .spa { font-size: 12px; color: #0066ff; } .put { fo ...

  2. HDU 1114 Piggy-Bank (完全背包)

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. lodar

    一个文件使用另一个文件的东西的时候需要使用到 export{开放} --watch 自动检测 可以加载打包的后边 module.exports = { entry:{ //入口文件 home:&quo ...

  4. Hadoop源代码分析(完整版)

    Hadoop源代码分析(一) 关键字: 分布式云计算 Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算设施. GoogleCluster:http:// ...

  5. 2016/06/13 phpexcel 未完待续

    ①准备工作: 1,php版本不能太低 2,去官网下载PHPExcel插件    http://phpexcel.codeplex.com/ 3,解压后提取classes文件夹到工作目录,并重命名为PH ...

  6. Axure Base 03

    (三)Axure rp元件的触发事件 l  OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l  OnMouseEnter(鼠标移入时): 鼠标进入 ...

  7. unzip解压指定我文件夹

    解压try.zip中指定的文件夹 unzip try.zip "try/*" shell中异常处理 { # your 'try' block executeCommandWhich ...

  8. UIView局部点击

    今天上班遇到一种情况,需要局部响应点击事件,比如在一个UIImageView中设置一个小圆圈图片,要求点击圆圈里面不响应点击,点击小圆圈外面的部分响应点击.可以通过重写hitTest:withEven ...

  9. Parameter 'username' not found. Available parameters are [1, 0, param1, param2]

    只要把dao层的***Mapper.java代码的参数加上@param 才可以 修改前的代码 public User selectLogin(String username,String passwo ...

  10. 使用TextView实现跑马灯的效果

    1.定义textView标签的4个属性: android:singleLine="true"//使其只能单行 android:ellipsize="marquee&quo ...