软件环境:

1、vs2015、windows7、.net4.5

演示说明:

当点击按钮的时候,柱状图数值加1并实时变化

1、首先打开vs2015创建一个mvc项目,并安装SignalR2,具体操作可参见:http://net-yuan.com/Article/Detail/e407a472-338a-458d-9d7a-4a9e43fd2da5

2、右键项目,新建文件夹,命名为Hubs,添加命名为ChartHub的SignalR集线器类

3、右键项目,新建文件夹,命名为Services,添加命名为ChartService的新类

4、ChartService类中创建一个方法NotifyUpdates,代码如下:

public async Task NotifyUpdates()
{
var hubContext = GlobalHost.ConnectionManager.GetHubContext<ChartHub>();
if (hubContext != null)
{
var stats = await this.
GetCount();
hubContext.Clients.All.updateChart(stats);
}
}

5、再创建两个方法,分别模拟获取计数和增长计数的过程,实际中,可以从数据库查询和数据写入数据库。

/// <summary>
/// 模拟数据类
/// </summary>
public static class D
{
public static int Count { get; set; }
} public async Task<int> GetCount()
{
return D.Count;
} public async Task<int> IncreaceCount()
{
D.Count = D.Count + 1;
return D.Count;
}

6、创建ApiController,命名为DataController,代码如下:

public class DataController : ApiController
{
private ChartService chartService; public DataController()
{
this.chartService = new ChartService();
} // POST api/<controller>
public async Task<HttpResponseMessage> Post()
{
var isCorrect = await this.chartService.IncreaceCount(); await this.chartService.NotifyUpdates(); return Request.CreateResponse(HttpStatusCode.Created, isCorrect);
}
}

7、视图Home/Index,代码如下:

<br />
<p><button class="btn btn-info" onclick="clkTest();">数据模拟</button></p> <p>1、本示例只是一个最小场景的演示</p>
<p>2、当点击按钮的时候,柱状图数值加1并实时变化</p>
<p>3、拆开来看,将点击操作看作服务器对数据的变化的发布;将柱状图数据变化看作是对服务器数据的订阅。这就是典型的数据推送,数据看板就是其中的一项应用。</p>
<p>4、可以有好多变化:如果将点击按钮的动作替换为每n(s)自动触发一次;如果能感知数据库某个表的数据变化来触发图表变化</p>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div> <script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/echarts.simple.min.js"></script>
@section Scripts {
<script src="@Url.Content("~/Scripts/jquery.signalR-2.4.0.min.js")"></script>
<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['SignalR'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
barWidth: '30%',
data: [0]
}
]
}; var connection = $.hubConnection();
var hub = connection.createHubProxy("ChartHub");
hub.on("updateChart", function (chart) {
statisticsData = chart;
console.log(statisticsData);
option.series[0].data[0] = statisticsData;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//$("#spCount").text(statisticsData);
}); connection.start();
</script>
} <script>
$(function () {
myChart.setOption(option);
}) var clkTest = function () {
$.post("/api/Data", null, function (res) {
console.log(res);
//$("#spClicks").text(res);
}, "json")
}
</script>

8、演示如下,打开两个客户端,可以看到,当点击按钮的时候,两个客户端的柱状图都会变化

 

GitHub:https://github.com/net-yuan/SignalR-RealTime

SignalR2简易数据看板演示的更多相关文章

  1. 采用异步来实现重新连接服务器或者重新启动服务 C#中类的属性的获取 SignalR2简易数据看板演示 C#动态调用泛型类、泛型方法 asp .net core Get raw request. 从壹开始前后端分离[.NetCore 不定期更新] 38 ║自动初始化数据库

    采用异步来实现重新连接服务器或者重新启动服务 开启异步监听,不会导致主线程的堵塞,在服务异常断开后一直检测重新连接服务,成功连接服务后通知各个注册的客户端! #region 检测断线并重连OPC服务 ...

  2. 一键生成的BI智能数据看板谁不爱?

    随着互联网思维的深化,如财务.市场.运营.销售等越来越多的岗位,都开始重视并自发性的开始了解并学习数据分析,来引导帮助决策. 人力资源制定效能仪表盘,去实时掌握人员状况和人均效能,通过对招聘漏斗的分析 ...

  3. 案例分享:Qt西门子机床人机界面以及数据看板定制(西门子通讯,mysql数据库,生产信息,参数信息,信息化看板,权限控制,播放器,二维图表,参数调试界面)

    若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/118685521 长期持续带来更多项目与技术分享 ...

  4. Android简易数据存储之SharedPreferences

    Andorid提供了多种数据存储的方式,例如前面说到的“Android数据存储之SQLite的操作”是用于较复杂的数据存储.然而,如果有些简单的数据存储如果采用SQLite的方式的话会显得比较笨重.例 ...

  5. 简易记事本(演示java文件io)

      演示效果:  打开txt文件 输入文字,保存 选择保存地址 生成文件 源代码: package io; import java.io.*; import java.awt.*; import ja ...

  6. 【Python】 更多数据类型collections&简易数据文件shelve

    ■collections collections在python内建的数据类型基础上新增一些实用的数据类型,其目的在于增加代码的可读性?(虽然我自己没怎么用过..) ① deque 双端队列 q = d ...

  7. 数据看板superset在Windows环境下安装

    @https://www.cnblogs.com/calmzeal/archive/2017/08/14/7359144.html 以下是我的安装版本与安装步骤: 1. 安装Python 3.7 ,  ...

  8. JAVA简易数据连接池Condition

    用Condition和synchronized: import java.sql.Connection; import java.sql.DriverManager; import java.sql. ...

  9. json的xpath:简易数据查询

    class JsonQuery(object): def __init__(self, data): super(JsonQuery, self).__init__() self.data = dat ...

随机推荐

  1. [AI]神经网络章1 神经网络基本工作原理

    神经元细胞的数学计算模型 神经网络由基本的神经元组成,下图就是一个神经元的数学/计算模型,便于我们用程序来实现. 输入 (x1,x2,x3) 是外界输入信号,一般是一个训练数据样本的多个属性,比如,我 ...

  2. springmvc相关

    Springmvc的请求注解可分为四类: url请求地址(PathVariable). head请求头(RequestHeader.CookieValue). body请求体(RequestParam ...

  3. Notepad++语言格式设置,自定义扩展名关联文件格式

    简单粗暴--直接上图

  4. 阻塞式简易http服务器

    说明         使用java.net包的ServerSocket也是阻塞的,所以下面的实例把ServerSocketChannel换成ServerSocket效果一样. 后台代码 package ...

  5. tensorflow下识别手写数字基于MLP网络

    # coding: utf-8 # In[1]: import tensorflow as tf import tensorflow.examples.tutorials.mnist.input_da ...

  6. oracle merge into语法

    oracle的merge into语法,在这种情况下: 基于某些字段,存在就更新,不存在就插入 不需要先去判断一下记录是否存在,直接使用merge into oerge into 语法: MERGE ...

  7. 2018.10.24 bzoj2064: 分裂(状压dp)

    传送门 状压dp好题. 考虑对于两个给出的集合. 如果没有两个元素和相等的子集,那么只能全部拼起来之后再拆开,一共需要n1+n2−2n1+n2-2n1+n2−2. 如果有呢? 那么对于没有的就是子问题 ...

  8. ThinkPHP3.2 伪静态配置

    前台伪静态且隐藏入口文件 就把“.htaccess文件” 放到指定文件夹下面 如图home做伪静态并隐藏入口文件: Apache为例,需要在入口文件的同级添加.htaccess文件 如果用的phpst ...

  9. 第9章 符合Python风格的对象

    #<流畅的Python>读书笔记 # 第9章 符合Python风格的对象 # 本章包含以下话题: # 支持用于生成对象其他表示形式的内置函数(如repr().bytes(),等等) # 使 ...

  10. CProgressCtrl进度条控件实现进度滚动效果

    关于CProgressCtrl 控件的基本操作网上有很多资料,可我想实现进度条中进度滚动效果,即很多时候程序出现的等待或启动画面,如下图: 实现这个效果的函数为SetMarquee(_In_ BOOL ...