Highcharts使用=====通过指定日期显示曲线
1、说明:
利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线。
2、实现方法:
在HighStock的rangeSelector中有一个属性inputDateParser,在这里面可以定义一个回调函数,当输入完日期后,会调用这个函数。
3、日期的取得:
右键查看元素可知,开始日期的input有name=‘min’属性,结束日期input有name='max'属性。这样只需要获得value只就可以了。
4、代码:
在回调函数中会用到,自己调用自己,因此定义了func()函数,以便在回调函数中使用。本例在回调函数中只是模拟,原理是一样的,只要把ajax发送的数据改为min、max就可以了。在后台,接收日期查询数据返回数据。
$(function () {
$.getJSON("/handler1.ashx", function func(dt) {
var data=[];
Highcharts.setOptions({
global: {
useUTC:false
} });
for (var i = 0; i < dt.length; i++) {
data.push([Date.parse(dt[i]["Time"]), Number(dt[i]["Value"])]);
}
$('#highstock').highcharts('StockChart', { credits: {
enabled:false
}, navigator: {
enabled: $(window).width() > 640
}, rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d',
enabled: true,
inputDateParser:function () {
$.ajax({ //实现点击日期框 再次选择数据
url: '/handler1.ashx',
dataType: 'json',
data:'min=45',
success:function(ds) {
func(ds);
}
}); }
}, series: [{
name: '持仓量',
data: data,
tooltip: {
valueDecimals: 2
}
}],
tooltip: {
formatter: function () {
var tip = "";
tip += Highcharts.dateFormat("%Y年%m月%d日", this.points[0].point.x, false) + "<br/>";
tip += "净持仓:" + this.points[0].point.y.toFixed(2) + "吨<br/>";
return tip; }
},
yAxis: { gridLineColor: '#ccc', labels: {
formatter: function () {
return this.value + "吨";
}
}
}
});
}); });
后台代码:接收到“45”说明是,点击日期选择框了,返回前2条数据。实际使用中,接收min、max日期,拼where条件查询数据返回。
string min = context.Request["min"]??"";
string sql;
if (min=="")
{
sql = "select top(2)Time,Value from TableTest order by Time";
}
else
{
sql= "select Time,Value from TableTest order by Time";
} DataTable dt=SqlDbHelper.ExecuteDataTable(sql); context.Response.Write(JsonConvert.SerializeObject(dt));
Highcharts使用=====通过指定日期显示曲线的更多相关文章
- 同一天的时间差,显示为HHMMSS和指定日期时间部分
//1.hhmmss private String setGoodsDisBalance(Date startTime,Date endTime){ //时间差:毫秒ms long diff = en ...
- 使用DateAdd方法向指定日期添加一段时间间隔,使用TimeSpan对象获取时间间隔
一:使用DateAdd方法向指定日期添加一段时间间隔,截图 二:代码 using System; using System.Collections.Generic; using System.Comp ...
- repo回退当前分支下所有仓库到指定日期前的最新代码版本【转】
本文转载自:https://blog.csdn.net/u011006622/article/details/70272087 执行下面这样的repo命令就行了: repo forall -c 'c ...
- springboot定时任务,去掉指定日期
今天用springboot写到一个需求:每周定时发送任务,但是要避开法定节假日. 网上找了些博客看,主要参考了https://www.cnblogs.com/lic309/p/4089633.html ...
- repo 回退当前分支下所有仓库到指定日期前的最新代码版本
回退命令: repo forall -c 'commitID=git log --before "2019-11-24 23:59" -1 --pretty=format:&quo ...
- day81:luffy:课程分类页面&课程信息页面&指定分类显示课程信息&分页显示课程信息
目录 1.构建课程前端初始页面 2.course后端的准备工作 3.后端实现课程分类列表接口 4.前端发送请求-获取课程分类信息 5.后端实现课程列表信息的接口 6.前端显示列表课程信息 7.按照指定 ...
- 断今天日期和指定日期相等和两者的时间差为两年的sql
1. ---判断今天日期和指定日期相等 update store set Status =1 where CONVERT(varchar(12) ,opendate, 105 )= CONVERT ...
- iOS不得姐项目--精华模块上拉下拉的注意事项,日期显示,重构子控制器,计算cell的高度(只计算一次),图片帖子的显示
一.上拉下拉注意事项 使用MJRefresh中的上拉控件自动设置透明 当请求下页数据通过page的时候,注意的是上拉加载更多数据失败的问题,下拉加载数据失败了,页数应该还原.或者是请求成功的时候再将页 ...
- JS 比较日期相隔都少天&& 比较两个日期大小&&指定日期往前后推指定天数
//这些天常接触到有关于js操作日期事 就小结了一下,希望对你有帮助 function conversionDate(a,b){ var start =a.split('-'); var end = ...
随机推荐
- CURL_INIT()
private function http_curl($url,$data=null){ //1.初始化,创建一个新cURL资源 $ch = curl_init(); //2.设置URL和相应的选项 ...
- 开VPN后能上网
@echo ************************************************************************:start@echo off set /p ...
- 删除Excel中的打印预览留下的打印线
Excel 工作表打印后,会留有几条虚线打印线.如下图所示: 不少同学反映,他们尝试了很多操作却仍然无法消除.难道除了重新打开就没有别的办法了? 可以这样做: 在 Excel 2010 中,单 ...
- windows编辑文本和unix编辑文本的回车符问题
我们的开发环境一般都使用windows操作系统,而测试环境和线上环境一般使用linux.windows下编辑的shell脚本,上传到windows下会发生错误.出现两种情况: 1.BOM头问题,前面有 ...
- gcc使用笔记
1.如何在gcc中传输宏定义? 参考如下红色部分,可以传入宏定义 gcc [-c|-S|-E] [-std=standard] [-g] [-pg] [-Olevel] [-Wwarn...] [-p ...
- DPC定时器
KeInitializeTimer 初始化定时器 KeInitializeTimerEx 初始化定时器 KeSetTimer 开启定时器(只执行一次) KeSetTimerEx 开启定时器(可以设置循 ...
- AE-后期制作的基本技能-小视频-实践!!
这是本人学习AE软件的实践练习,看来,学习基本技能要慢慢来,稳步前进,一步一个脚印才对!!同时,多观看别人的作品,多看一下电视上面的片头,广告的效果;学习AE要带着问题,思路来学习!多做理论联系实际操 ...
- Android 获取网络链接类型
/** * 获取当前网络类型 * @return 0:没有网络 1:WIFI网络 2:WAP网络 3:NET网络 */ public int getNetworkType() { int netTyp ...
- HttpClient and FileUpload
All communication over the Internet happens using a standard set of protocols, such as File Transfer ...
- COJ 0024 N皇后问题
N皇后问题 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 在N*N的方格棋盘放置N个皇,使得它们不相互攻击(即任意2个 ...