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 ...
随机推荐
- 【转载】Qt Creator 添加自定义注释
原文:https://blog.csdn.net/liang19890820/article/details/54925434 自定义注释注释的原则是有助于对程序的阅读理解,不宜太多,也不能太少(一般 ...
- Libxml2函数及使用方法概述【转】
https://blog.csdn.net/chengwenyao18/article/details/7176082 一.关于XML: 在开始研究 Libxml2 库之前,先了解一下XML的相关基础 ...
- Asp.net web Control Enable 属性设置
最近手上有一个很简单的一个小项目,需要查看编辑的历史记录,先前设计的时候把数据都save 到DB了,现在时间紧迫 就不在画新的UI,而是采用以前的edit页面 来显示数据,这里就需要把页面上所有的co ...
- 全文检索(SOLR)前端应用浅析 (转)
最近在一个关于知识管理系统中检索的一个功能方案,找到了一个很好的参考应用方案嘎要的分析一下,希望有类似应用的可以交流交流. 提起全文检索,Lucene的大名估计地球人都知道,通过这么多年的发展,外围的 ...
- Hash dump神器 (转)
在Win7 x64位下无压力测试通过. 0 / INTRO========= Quarks PwDump 是一个Win32环境下的系统授权信息导出工具,目前除此之外没有任何一款工具可以导出如此全面的信 ...
- [leetcode]Multiply Strings @ Python
原题地址:https://oj.leetcode.com/problems/multiply-strings/ 题意: Given two numbers represented as strings ...
- [leetcode]Pascal's Triangle @ Python
原题地址:https://oj.leetcode.com/problems/pascals-triangle/ 题意: Given numRows, generate the first numRow ...
- [算法导论]quicksort algorithm @ Python
算法导论上面快速排序的实现. 代码: def partition(array, left, right): i = left-1 for j in range(left, right): if arr ...
- C# MemCached分布式缓存
using System; using System.Collections.Generic; using System.Text; using Memcached.ClientLibrary; us ...
- java 流媒体服务器Red5 FQA
原文链接:http://www.cnblogs.com/zhuzhao/archive/2008/08/12/1265661.html red5 FQA red5 FQA 引自:http://hi ...