HighStock如何动态添加数据组
var charts = null;
$(function () {
var seriesIds = [830];
// Create the chart
charts = new Highcharts.StockChart({
chart: {
renderTo: 'container',
borderWidth: 1 //边框宽度
},
exporting: {
enabled: true //是否能导出趋势图图片
},
title: {
text: "AAPL Stock Price(报名统计)", //图表标题
floating: true
},
xAxis: {
tickPixelInterval: 200,
labels: {
align: 'center'
},
dateTimeLabelFormats: {
second: '%Y-%m-%d-%H:%M:%S',
minute: '%Y-%m-%d-%H:%M',
hour: '%Y-%m-%d-%H:%M',
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: "Rate(个数)" //y轴上的标题
},
labels: {
//设置纵坐标值的样式
formatter: function () {
return this.value + "个";
}
}
},
rangeSelector: {
// 缩放选择按钮,是一个数组。
// 其中type可以是: 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
// 其中count是指多少个单位type。
// 其中text是配置显示在按钮上的文字
buttons: [{
type: 'month',
count: 1,
text: '1月'
}, {
type: 'month',
count: 3,
text: '季度'
}, {
type: 'year',
count: 1,
text: '1年'
}, {
type: 'all',
text: '全部'
}],
//表示以上定义button的index,从0开始
selected: 1,
//日期输入框中格式
inputDateFormat: '%Y-%m-%d'
},
tooltip: {
xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式
},
series: [],
//底部滑轮控制
navigator: {
xAxis: {
tickPixelInterval: 200,
labels: {
align: 'right'
},
dateTimeLabelFormats: {
second: '%Y-%m-%d-%H:%M:%S',
minute: '%Y-%m-%d-%H:%M',
hour: '%Y-%m-%d-%H:%M',
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
}
}
});
$.each(seriesIds, function (j, pid) {
$.ajax({
type: "post",
url: "retrunJsonStr.ashx",
async: false,
dataType: "text",
data: { pid: pid },
success: function (json) {
charts.addSeries({
name: pid,
type: 'spline',
data: eval('(' + json + ')')
}, false);
charts.redraw(); //刷新
}
});
});
});
function getChart(obj) {
var pid = $(obj).val();
var isCk = $(obj).attr("checked");
if (isCk) {
$.ajax({
type: "post",
url: "retrunJsonStr.ashx",
async: false,
dataType: "text",
data: { pid: pid },
success: function (json) {
charts.addSeries({
name: pid,
type: 'spline',
data: eval('(' + json + ')')
}, false);
charts.redraw();
}
});
} else {
for (var i = 0; i < charts.series.length; i++) {
if (charts.series.name == pid) {
charts.series.remove(false);
}
}
charts.redraw();
}
}
HighStock如何动态添加数据组的更多相关文章
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解
一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)
一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- ASP.NET网页动态添加数据行
一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...
- silverlight RadGridView 动态添加数据列
public void BindFaultGridInfo(IList<HealthStatusApp.Web.Models.FaultMajorModel> list) { rg_Fau ...
- Layui表格之动态添加数据(表格多选解决方案)
前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...
随机推荐
- [转]分析MySQL数据类型的长度【mysql数据字段 中length和decimals的作用!熟悉mysql必看】
转载自:http://blog.csdn.net/daydreamingboy/article/details/6310907 分析MySQL数据类型的长度 MySQL有几种数据类型可以限制类型的&q ...
- go语言之进阶篇通过switch实现类型断言
1.通过switch实现类型断言 示例: package main import "fmt" type Student struct { name string id int } ...
- 如何: 重命名在 IIS 6.0 中的虚拟目录
警告如果错误地为编辑元数据库,您会导致严重的问题,甚至可能需要重新安装使用元数据库的任何产品. Microsoft 不能保证可以解决问题,如果您错误地编辑元数据库产生.编辑元数据库需要您自担风险. 注 ...
- C#窗体读取EXCEL存入SQL数据库
windows窗体上放了一个Textbox1,2个按钮button1和button2~按button1选择excel文件~按button2进行相关处理 Code Snippet private vo ...
- HTML5 File API 全介绍
在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...
- Python3爬虫:利用Fidder抓取手机APP的数据
1.什么是Fiddler? Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,ht ...
- 转:TensorFlow入门(六) 双端 LSTM 实现序列标注(分词)
http://blog.csdn.net/Jerr__y/article/details/70471066 欢迎转载,但请务必注明原文出处及作者信息. @author: huangyongye @cr ...
- AVR单片机命名规则
ATmega64 TQFP封装现主要有以下型号:ATmega64L-8AU.ATmega64L-8AI.ATmega64-16AU.ATmega64-16AI. 型号标识说明: (1)带"L ...
- Downloading jQuery 3.2.1
Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompresse ...
- [Algorithm] Powerset Problem
By given an array [1,2,3]: Return all possible combinations. for example: [[], [1], [2], [3], [1, 2] ...