HighChat 动态绑定数据记录
最近刚开始做图形操作，纠结了一上午，highchat 动态绑定数据这块一直不知道怎么绑定，后来多次尝试，发现
1.x轴的数据是个数组格式，我从后台传到前台的时候，js中用数组进行处理数据，然后赋值到chat就不会报错，
2.y轴的数据和x轴数据还不一样，通过数组处理后发现还是无法显示。后来我在后台将数据添加了中括号[]括起来后，传到前台，然后前台在用eval()处理后就能够显示了
3.eval具有计算的功能，刚开始x轴的时候我用了eval对时间进行操作发现时间都是相减了，格式为：2017-07-27，格式居然为1998这样的。
下面是我的后台和前台的程序逻辑：
1.后台MVC控制器
1 public ActionResult Index()
2 {
3 return View();
4 }
5 public ActionResult GetAllReport()
6 {
7 var result = new { key = "2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02", value1 = "[9,23,24,54,67,1,23,45,23,444,55,89]", value2 = "[99,89,78,67,76,75,49,47,21,32,33,55]" };
8 return Json(result);
9 }
2.前台：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/charts/highcharts/exporting.js"></script>
<script src="~/charts/highcharts/highcharts.js"></script>
<script src="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$.ajax({
url: '/Home/GetAllReport',
dataType: "json",
type: "POST",
data: null,
success: function (data) {
alert(data.key);
Chart(data.key, data.value1, data.value2);
}, error: function (jqXHR, textStatus, errorThrown) {
alert("出错");
}
});
});
function Chart(key, value1, value2) {
var mycars = new Array();
var myvalue1 = new Array();
var myvalue2 = new Array();
var _tkey = key.split(',');
for (var i = 0; i < _tkey.length; i++) {
mycars[i] = _tkey[i];
}
var _tvalue1 = value1.split(',');
for (var i = 0; i < _tvalue1.length; i++) {
myvalue1[i] = _tvalue1[i];
}
var _tvalue2 = value2.split(',');
for (var i = 0; i < _tvalue2.length; i++) {
myvalue2[i] = _tvalue2[i];
}
var chart = new Highcharts.Chart('container', {
title: {
text: '不同城市的月平均气温',
x: -20
},
subtitle: {
text: '数据来源: WorldClimate.com',
x: -20
},
xAxis: {
categories: mycars
},
yAxis: {
title: {
text: '温度 (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '东京',
data: eval(value1)
}, {
name: '纽约',
data: eval(value2)
}]
});
}
</script>
另外呢还有一些 小处理
1. 2条折线重复的时候，鼠标放上去需要都显示数据
tooltip: {
shared: true
}
2. 去除highchat.com 网址
credits: {
enabled: false
}
3. 刷新数据的时候 需要将上次的折线图清除
function clearTable() {
var series = chart.series;
if (series.length > 0) {
series[0].remove(false);
}
}
HighChat 动态绑定数据记录的更多相关文章
- HighChat动态绑定数据 数据后台绑定（四）
后台绑定数据,直接返回json数据 IList<SummaryHour> adHourData = summarybll.FindList(str); List<, , , , , ...
- HighChat动态绑定数据 数据后台绑定（三）
今天看了几位大佬的博客,学到了一些,现在分享一下,也作为以后的参考 不多说看代码 1.后台代码 public ActionResult Ajax2() { ReportData reportData ...
- HighChat 动态绑定数据（二）
也是对最近几天的折线图搞得烦心,看了好多前辈的文章,也总结了一下. 1.先看后台程序,这是我模拟的一些参数 就是一个字符串.没啥好说的 public ActionResult Index2() { s ...
- MySQL单表百万数据记录分页性能优化
背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我 ...
- SQL Server 存储(2/8)：理解数据记录结构
在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下. 数据记录存储我们具体的数据,换句话说,它存在 ...
- MySQL 单表百万数据记录分页性能优化
文章转载自:http://www.cnblogs.com/lyroge/p/3837886.html 背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台 ...
- dev checkedlistbox动态绑定数据
最近在做项目的时候遇到个问题.用checkedlistbox控件绑定数据.在这里稍微总结一下. 其实动态绑定数据有两种方法下面说一下 1.通过数据源 DataTable dt=new DataTabl ...
- (转)ThinkPHP find方法 查询一条数据记录
find() ThinkPHP find() 方法是和 select() 用法类似的一个方法,不同之处 find() 查询出来的始终只有一条数据,即系统自动加上了 LIMIT 1 限制. 当确认查询的 ...
- MySQL查询数据表中数据记录（包括多表查询）
MySQL查询数据表中数据记录(包括多表查询) 在MySQL中创建数据库的目的是为了使用其中的数据. 使用select查询语句可以从数据库中把数据查询出来. select语句的语法格式如下: sele ...
随机推荐
- 网关地址和网关IP是什么，他们有什么关系？
2019-12-19 新用户541... 转自 小糊涂大神 修改 通常情况下,一台终端上网必须设置IP地址.子网掩码.网关IP地址,终端IP地址与网关IP属于同一个网段,网关IP是终端访问外网 ...
- Shiro RememberMe 1.2.4 反序列化漏洞复现
目录 原理解释 环境搭建 复现过程 原理解释 Apache Shiro是一个Java安全框架,执行身份验证.授权.密码和会话管理. shiro默认使用了CookieRememberMeMana ...
- C++和C的相互调用
C++和C相互调用实际工程中C++和C代码相互调用是不可避免的C++编译器能够兼容C语言的编译方式C++编译器会优先使用C++编译的方式extern关键字能强制让C++编译器进行C方式的编译 exte ...
- 201871010110-李华《面向对象程序设计（java）》第十三周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- ubuntu16.04安装docker图形管理界面portainer
下载镜像 docker pull portainer/portainer 单机版运行 docker run -d --name portainer \ -p 9000:9000 \ --restart ...
- 并发、并行、同步、异步、全局解释锁GIL、同步锁Lock、死锁、递归锁、同步对象/条件、信号量、队列、生产者消费者、多进程模块、进程的调用、Process类、
并发:是指系统具有处理多个任务/动作的能力. 并行:是指系统具有同时处理多个任务/动作的能力. 并行是并发的子集. 同步:当进程执行到一个IO(等待外部数据)的时候. 异步:当进程执行到一个IO不等到 ...
- JDOJ 3055: Nearest Common Ancestors
JDOJ 3055: Nearest Common Ancestors JDOJ传送门 Description 给定N个节点的一棵树,有K次查询,每次查询a和b的最近公共祖先. 样例中的16和7的公共 ...
- KMP——从入门到不会打题
KMP——从入门到不会打题 前言 如果你不了解哈希,建议先观看本蒟蒻的另一篇博客,对哈希有一定的理解 哈希大法吼 KMP算法,别名烤馍片或者看毛片,由烤馍片男子天团三位神犇同时发现的一种强大的单模 ...
- Vue实际中的应用开发【分页效果与购物车】
作者 | Jeskson 来源 | 达达前端小酒馆 分页组件 首先来创建项目: 分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底 ...
- 网络1911、1912 C语言第5次作业--循环结构 批改总结
如题 一.评分规则 1.伪代码务必是文字+代码描述,直接反应代码,每题扣1分 2.提交列表没内容,或者太简单,每题得分0分.注意选择提交列表长的题目介绍. 3.代码格式不规范,包括命名随意.继续扣分. ...