一.项目介绍
利用前端Highchart，以及ajax向后台获取数据，绘制动态柱状图。hightchart其他实例可查看官网文档。[Highchart](https://www.highcharts.com.cn)
二.准备工作
先搭建项目以及所要访问的数据库及数据，这里不做赘述。
然后编写Controller代码，用于提供数据。

 [HttpPost]

 public JsonResult GetDataList(int BeformDays, int Type)

 {

 JsonResultData json = new JsonResultData();

 json.datas.Add(new Detail {

 name="测试总数"

 });

 json.datas.Add(new Detail

 {

 name = "测试失败"

 });

 json.datas.Add(new Detail

 {

 name = "测试成功"

 });

 var list=_dataContext.Responses.ToList();

 if (Type == )

 {

 foreach (var item in list)

 {

 json.names.Add(item.ClientName);

 //json.testSuccessNum.Add(item.TestSuccessNum);

 json.datas.FirstOrDefault(o => o.name == "测试总数").data .Add(item.TestNum);

 json.datas.FirstOrDefault(o => o.name == "测试成功").data.Add(item.TestSuccessNum);

 json.datas.FirstOrDefault(o => o.name == "测试失败").data.Add(item.TestNum-item.TestSuccessNum);

 }

 }

 return Json(json);

 }

二.前端代码
先引用需要用到的js包，如下：

```

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/modules/data.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>

<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js">	</script>

<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>　　

js代码如下：

 <script type="text/javascript">

 //DrawHistogram();

 $(document).ready(function () {

 DrawHistogram("container");//页面加载，异步运行该方法

 });

 setInterval(function () {

 DrawHistogram("container");

 }, 1000 * 60);//定时刷新数据

 function DrawHistogram(id) {

 var chart;

 //获取数据

 $.ajax({

 async: false,

 type: 'post',

 datatype: 'json',

 url: '/home/getdatalist',

 data: { BeformDays: 7, Type: 1 },

 success: function (Data) {

 Name = Data.names;

 //highchants样式渲染

 chart = new Highcharts.Chart({

 chart: {

 renderTo: id,//放置图表的容器

 plotBackgroundColor: null,//绘图背景颜色

 plotBorderWidth: null,//绘图边框宽度

 defaultSeriesType: 'column'//图表类型样式line, spline, area, areaspline, column, bar, pie , scatter这些样式随你选

 },

 title: {

 text: '柱状图统计'

 },

 subtitle: {

 text: ''//副标题

 },

 xAxis: {//X轴数据

 categories: Data.names,//请求到的json数据

 labels: {

 rotation: 0, //字体倾斜

 align: 'right',

 style: { font: 'normal 13px 宋体' }

 }

 },

 yAxis: {//Y轴显示文字

 title: {

 text: '个数/个'

 }

 },

 //点击事件

 tooltip: {

 enabled: true,//是否显示tooltip

 formatter: function () {

 return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);

 }

 },

 plotOptions: {

 line: {

 dataLabels: {

 enabled: true

 },

 enableMouseTracking: true//是否显示title

 }

 },

 series: Data.datas//json

 });

 //setInterval("getjson()", 3000);

 }

 });

 }

 </script>

 ```

 在html页面添加容器，html代码如下：

 ```

 <body>

 <!--存放内容-->

 <div id="container">

 </div>

 </body>

效果图：

ASP.NET Core +Highchart+ajax绘制动态柱状图的更多相关文章

  1. asp.net core 通过ajax上传图片及wangEditor图片上传

    asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...

  2. ASP.Net Core使用Ajax局部更新

    由于目前ASP.NET Core中没有提供Ajax帮助器,所以参照 上一篇帖文,使用data-ajax-*属性来使用jQuery Unobtrusive Ajax功能实现HTML的局部页面元素更新. ...

  3. ASP.Net Core MVC+Ajax 跨域

    要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...

  4. asp.net core 通过ajax调用后台方法（非api）

    1.    在Startup.cs文件中添加:        services.AddMvc();            services.AddAntiforgery(o => o.Heade ...

  5. ASP.NET Core应用针对静态文件请求的处理[1]: 以Web的形式发布静态文件

    虽然ASP.NET Core是一款"动态"的Web服务端框架,但是在很多情况下都需要处理针对静态文件的请求,最为常见的就是这对JavaScript脚本文件.CSS样式文件和图片文件 ...

  6. ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（七） 学生信息增删

    前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...

  7. 从零开始实现ASP.NET Core MVC的插件式开发(五) - 插件的删除和升级

    标题:从零开始实现ASP.NET Core MVC的插件式开发(五) - 使用AssemblyLoadContext实现插件的升级和删除 作者:Lamond Lu 地址:https://www.cnb ...

  8. ASP.NET Core静态文件中间件[1]: 搭建文件服务器

    虽然ASP.NET Core是一款"动态"的Web服务端框架,但是由它接收并处理的大部分是针对静态文件的请求,最常见的是开发Web站点使用的3种静态文件(JavaScript脚本. ...

  9. 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器

    1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...

随机推荐

  1. # webpack 打包工具（vue）

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  2. 让SpringBoot的jackson支持JavaBean嵌套的protobuf

    问题背景 REST 项目使用protobuf 来加速项目开发,定义了很多model,vo,最终返回的仍然是JSON. 项目中一般使用 一个Response类, public class Respons ...

  3. Java基础（七）泛型数组列表ArrayList与枚举类Enum

    一.泛型数组列表ArrayList 1.在Java中,ArrayList类可以解决运行时动态更改数组的问题.ArrayList使用起来有点像数组,但是在添加或删除元素时,具有自动调节数组容量的功能,而 ...

  4. django-URL之从URL中获取关键字（七）

    主要用于查询操作. 主要目录 book/views.py from django.http import HttpResponse from django.shortcuts import rende ...

  5. 基本的sql 语句

    1,登陆数据库:mysql -u root -p2,退出数据库:exit quit ctr+d3,创建数据库:create database 数据库名 charset=utf84,使用数据库:use ...

  6. Docker 从入门到掉坑

    Docker 介绍 简单的对docker进行介绍,可以把它理解为一个应用程序执行的容器.但是docker本身和虚拟机还是有较为明显的出入的.我大致归纳了一下,可以总结为以下几点: docker自身也有 ...

  7. 安装Java环境

    一．下载JDK https://www.oracle.com/technetwork/java/javase/downloads/index.html 二．exe安装 默认路径 C:\Program ...

  8. C语言I作业07

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9932 我在 ...

  9. git log 附加命令归纳

    git查看历史记录的时候查看每次提交的内容差异: git log -p git限制显示的条数 : git log -p -2 [-2] git简单显示每次提交做了哪些改动: git log --sta ...

  10. Go netpoll I/O 多路复用构建原生网络模型之源码深度解析

    导言 Go 基于 I/O multiplexing 和 goroutine 构建了一个简洁而高性能的原生网络模型(基于 Go 的I/O 多路复用 netpoll),提供了 goroutine-per- ...