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 ...
随机推荐
- Understanding Linux CPU stats
Your Linux server is running slow, so you follow standard procedure and run top. You see the CPU met ...
- hdu 3660 Alice and Bob's Trip(树形DP)
Alice and Bob's Trip Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- windows server 2008 r2 启用索引(转)
08r2的“windows search”服务默认是不安装的,要想启用索引执行下列步骤: 1.打开“服务器管理”——选中“角色”——右边选中“添加角色”——勾选“文件服务”. 2. ...
- Luban 鲁班 图片压缩 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- C# MemCached分布式缓存
using System; using System.Collections.Generic; using System.Text; using Memcached.ClientLibrary; us ...
- HDU 4548 美素数 素数题解
本题就是能够直接打表的,推断能否够打表也须要技巧的: 1 推断最大的数值为1000000.百万下面的数打表都是能够的 2 能够线性预处理好.使用素数筛子法是能够接近线性预处理的. 故此能够打表了. 须 ...
- Tensorflow-3-使用RNN生成中文小说
https://blog.csdn.net/heisejiuhuche/article/details/73010638 这篇文章不涉及RNN的基本原理,只是从选择数据集开始,到最后生成文本,展示一个 ...
- hadoop2.2.0 centos 编译安装详解
http://blog.csdn.net/w13770269691/article/details/16883663 废话不讲,直切正题. 搭建环境:Centos x 6.4 64bit 1.安装JD ...
- redis信息相关集群
转: http://www.runoob.com/redis/redis-install.html //redis的安装与运维相关 http://zhou123.blog.51cto.com/4355 ...
- 一起talk C栗子吧(第一百三十三回:C语言实例--创建进程时的内存细节)
各位看官们.大家好,上一回中咱们说的是从内存角度看进程和线程的样例.这一回咱们说的样例是:创建进程时的内存细节.闲话休提,言归正转.让我们一起talk C栗子吧! 看官们.我们都知道使用fork函数能 ...