ASP.NET Core +Highchart+ajax绘制动态柱状图
一.项目介绍
利用前端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绘制动态柱状图的更多相关文章
- asp.net core 通过ajax上传图片及wangEditor图片上传
asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...
- ASP.Net Core使用Ajax局部更新
由于目前ASP.NET Core中没有提供Ajax帮助器,所以参照 上一篇帖文,使用data-ajax-*属性来使用jQuery Unobtrusive Ajax功能实现HTML的局部页面元素更新. ...
- ASP.Net Core MVC+Ajax 跨域
要求 C端:用户端(http://www.b.com) A端:管理端(http://admin.b.com) 问题:A端上传图片到C端指定文件夹内保存,供C端使用. 方案 ① C端从nuget引入Mi ...
- asp.net core 通过ajax调用后台方法（非api）
1. 在Startup.cs文件中添加: services.AddMvc(); services.AddAntiforgery(o => o.Heade ...
- ASP.NET Core应用针对静态文件请求的处理[1]: 以Web的形式发布静态文件
虽然ASP.NET Core是一款"动态"的Web服务端框架,但是在很多情况下都需要处理针对静态文件的请求,最为常见的就是这对JavaScript脚本文件.CSS样式文件和图片文件 ...
- ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（七） 学生信息增删
前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...
- 从零开始实现ASP.NET Core MVC的插件式开发(五) - 插件的删除和升级
标题:从零开始实现ASP.NET Core MVC的插件式开发(五) - 使用AssemblyLoadContext实现插件的升级和删除 作者:Lamond Lu 地址:https://www.cnb ...
- ASP.NET Core静态文件中间件[1]: 搭建文件服务器
虽然ASP.NET Core是一款"动态"的Web服务端框架,但是由它接收并处理的大部分是针对静态文件的请求,最常见的是开发Web站点使用的3种静态文件(JavaScript脚本. ...
- 一个由正则表达式引发的血案 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. 一些特殊字符,如“&”,“- ...
随机推荐
- Handler的postDelayed(Runnable, long)
handler.postDelayed(myRunnable,1000)是为了轮播图片,每隔1000ms后执行一次run方法,实现轮播实例如下: public void MesageColse(){ ...
- weex不支持类的动态追加
做一个weex项目时遇到需要根据状态动态改变样式的功能,本来想通过判断属性追加类的方式实现,如下: :class="['long-news',{'bold-txt':noRead}]&quo ...
- 前端技术之：通过plop生成Controller的方法与步骤
# Controller的生成 开发者可以通过plop命令生成各种类型的控制器类(Normal.Restful.View), 以下是示例生成步骤. 1. 执行以下命令: plop controller ...
- hydra的使用
hydra参数详解 -R 继续从上一次进度接着破解 -S 大写,采用SSL链接 -s 小写,可通过这个参数指定非默认端口 -l 指定破解的用户,对特定用户破解 -L 指定用户名字典 -p 小写,指定密 ...
- Numpy 中的比较和 Fancy Indexing
# 导包 import numpy as np Fancy Indexing 应用在一维数组 x = np.arange(16) x[3] x[3:9] # array([3, 4, 5, 6, 7, ...
- LNMP下zabbix_server安装部署二
上一篇中搭建完成了zabbix的web端,但是虚拟机有点问题,所以转到笔记本上来写笔记本环境 server:192.168.112.9 agent:192.168.112.8 上一篇中完成了web ...
- [考试反思]0818NOIP模拟测试25：清心
两机房分开考试.拿到了令人orz的A卷. 15本校+3外校=18人参加 排名第7,没前途.大不了去第二机房... skyh也很强了.tdcp拿来一个诡异的. 86,85,79.然后是我垃圾的.在后面差 ...
- NOIP模拟测试11
这次考试T1想到了正解没有去实现,然后就死了,不过我估计就算想到正解也会挂(26^2和暴力一个分),肝了两个小时T2屁都没蹦出来,T3没有搞清那个式子的含义. (不过一分没挂) T1:string 开 ...
- 手写jwt验证，实现java和node无缝切换
前言 前端时间和我朋友写了一个简易用户管理后台,功能其实很简单,涉及到的技术栈有:vue+elementUI,java+spring MVC以及node+egg,数据库用的mysql,简单方便. 一开 ...
- 如何处理消息队列消费过程中的重复消息&如何实现幂等性
什么是幂等 幂等本来是数学上的概念,它的定义是这样的: 如果一个函数 f(x) 满足:f(f(x)) = f(x),则函数 f(x) 满足幂等性. 在计算机领域用来描述一个操作.方法或者服务.一个幂等 ...