问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
highcharts官方例子：，
需要实现如雪球：，这样的分时图效果，x轴固定时间，然后有数据就实时打点
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
/我也正在做，也想知道这个问题，我找到答案之后再告诉你吧/
日11:29:21 编辑
现在我还是没找到真正的解决方法，但是用了另外一个方法解决了这个问题，你的既然是股票分时图，应该还要显示交易量的吧？比如说像下图那样
如果是有交易量的就好办了，在你的交易量的数据中，把后面没有数据的地方也加上数据，x值自己计算，y 值均为 0 就行了
while(columnData.length&240){columnData.push({x:columnData.slice(-1)[0].x+(60*1000),y:0})}
columnData是交易量数据，正常来说，中国一天开市的时间是 4 小时，每小时 60 分钟，4*60=240 分钟，刚好数据也是一分钟一条，所以columnData.length应该为 240. 设置 x 值的方法你可以参考，反正 y 值是 0。而分时的价格数据不用管，最后效果如上图。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：相关文章推荐
一步一步教你写股票走势图——分时图一（概述）
一步一步教你写股票走势图——分时图二（自定义xy轴）
一步一步教你写股票走势图——分时图三（对齐图表、自定义柱状图高亮）
一步一步教你写股票...
**最近捣鼓股票的东西，想看看股票的实时涨跌信息，又不想去看网上炒股软件现有的信息，所以寻思着自己写了一个Python的股票当前价格抓取工具，废话不多说，上代码：**
package com.cxzapp.stamp.
import android.content.C
import android.graphics.C
转自：/article/.html
一、获取最新实时行情
以大秦铁路（股票代码：601006）为例，要获取它的最新行情，只需...
转载请注明出住： http://blog.csdn.net/andywuchuanlong
现在在手上的是一个证券资讯类型的app，其中有涉及到股票行情界面，行情中有K线图等，看到网上很多人在求这...
股票分时图部分已经开发完毕，受到了广大开发者的好评！界面、功能都挺完美，解决了好一些MP开发者的问题，博主甚是欣悦，更有动力去开源K线图。这里说一下，如果有问题直接留言或者发邮件，github上个人信...
股票K线图实现
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)下次自动登录
现在的位置:
& 综合 & 正文
asp.net 制作K线图——highstock
highcharts是一款非常不错的开源的js绘图工具，我们所需要做的就是用他能听懂的语言告诉他怎么做，剩下的事情就交给highcharts了。
废话不多说步入正题。
1.从下载Highstock.js
2.在自己的网站引用jquery.min.js和highstock.js（jquery.min.js要放在highstock前面）
3.前台网站代码编写，直接贴代码
&head runat="server"&
股票走势图
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script type="text/javascript" src="js/jquery.min.js"&
&script type="text/javascript" src="js/highstock.js"&
&script type="text/javascript"&
$(function() {
//官方例子获取json数据地址（经常无法访问）
///samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?
$.getJSON('JsonData/StockData.ashx?callback=?', //通过后台获取数据库中股票phlc数据
function(data) {
//把获取的数据放入ohlc 中
var ohlc = [],
volume = [],
avg5 = [],
avg10 = [],
avg20 = [],
dataLength = data.
for (i = 20; i & dataL i++) {
ohlc.push([data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
var temp5 = (parseFloat(data[i][4]) + parseFloat(data[i - 1][4]) + parseFloat(data[i - 2][4]) + parseFloat(data[i - 3][4]) + parseFloat(data[i - 4][4])) / 5;
avg5.push([data[i][0], temp5]);
//10日均线
var temp10 = (parseFloat(data[i][4]) + parseFloat(data[i - 1][4]) + parseFloat(data[i - 2][4]) + parseFloat(data[i - 3][4]) + parseFloat(data[i - 4][4]) + parseFloat(data[i - 5][4]) + parseFloat(data[i - 6][4]) + parseFloat(data[i - 7][4]) + parseFloat(data[i - 8][4]) + parseFloat(data[i - 9][4])) / 10;
avg10.push([data[i][0], temp10]);
//20日均线
var temp20 = (parseFloat(data[i][4]) + parseFloat(data[i - 1][4]) + parseFloat(data[i - 2][4]) + parseFloat(data[i - 3][4]) + parseFloat(data[i - 4][4]) + parseFloat(data[i - 5][4]) + parseFloat(data[i - 6][4]) + parseFloat(data[i - 7][4]) + parseFloat(data[i - 8][4]) + parseFloat(data[i - 9][4]) + parseFloat(data[i - 10][4]) + parseFloat(data[i - 11][4]) + parseFloat(data[i - 12][4]) + parseFloat(data[i - 13][4]) + parseFloat(data[i - 14][4]) + parseFloat(data[i - 15][4]) + parseFloat(data[i - 16][4]) + parseFloat(data[i - 17][4]) + parseFloat(data[i - 18][4]) + parseFloat(data[i - 19][4])) / 20;
avg20.push([data[i][0], temp20]);
volume.push([data[i][0], // 日期
data[i][5] // volume
// 创建图表
$('#container').highcharts('StockChart',
* 域选择配置
* @param {array} buttons 缩放选择按钮
* @param {int} selected 默认选择缩放按钮中的第几个
* @param {boolean} inputEnabled 是否允许input标签选框
rangeSelector: {
// 缩放选择按钮，是一个数组。
// 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
// 其中count是指多少个单位type。
// 其中text是配置显示在按钮上的文字
buttons: [{
type: 'year',
text: '1年'
// 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
selected: 1,
enabled: false
// 是否允许input标签选框
// inputEnabled: false
navigator: {
enabled: true
* X轴坐标配置
* @param {object} dateTimeLabelFormats x轴日期时间格式化，不用修改直接使用
// 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式
dateTimeLabelFormats: {
second: '%Y-%m-%d %H:%M:%S',
minute: '%Y-%m-%d %H:%M',
hour: '%Y-%m-%d %H:%M',
day: '%Y-%m',
week: '%Y-%m',
month: '%Y-%m',
year: '%Y'
credits: {
text: 'xxx公司',
align: 'left',
text: 'xxx股票'
text: 'OHLC'
height: 200,
lineWidth: 1
text: 'Volume'
height: 100,
offset: 0,
lineWidth: 1
* 气泡示说明标签
* @param {string} xDateFormat 日期时间格式化
tooltip: {
valueDecimals: 2,
useHTML: true,
formatter: function() {
var s = '&b&' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '&/b&&br/&';
s += '开盘价：' + this.points[0].point.open + '&br/&最高价：' + this.points[0].point.high + '&br/&最低价：' + this.points[0].point.low + '&br/&收盘价：' + this.points[0].point.close + '&br/&市值：' + this.points[1].y + '&br/&&font color="' + this.points[2].series.color + '"&MA5：' + Math.round(this.points[2].y * 100) / 100 + '&/font&' + '&br/&&font color="' + this.points[3].series.color + '"&MA5：' + Math.round(this.points[3].y * 100) / 100 + '&/font&' + '&br/&&font color="' + this.points[4].series.color + '"&MA5：' + Math.round(this.points[4].y * 100) / 100 + '&/font&';
height: 500
//width: 100%
exporting: {
url: 'http://127.0.0.1:2415/ExportServer.aspx'
plotOptions: {
candlestick: {
color: 'green',
upColor: 'red',
lineColor: 'green',
upLineColor: 'red'
colorByPoint: false
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc
dataGrouping: {
units: groupingUnits
type: 'column',
name: 'Volume',
data: volume,
dataGrouping: {
units: groupingUnits
name: 'MA5',
data: avg5,
type: 'spline',
threshold: null,
tooltip: {
valueDecimals: 2
name: 'MA10',
data: avg10,
type: 'spline',
threshold: null,
tooltip: {
valueDecimals: 2
name: 'MA20',
data: avg20,
type: 'spline',
threshold: null,
tooltip: {
valueDecimals: 2
&script type="text/javascript"&
&form id="form1" runat="server"&
&div id="test"&
&div id="container" style="height: 100%; width: 100%"&
4.后台数据获取
新建一个axsh文件
using System.C
using System.D
using System.L
using System.W
using System.Web.S
using System.Web.Services.P
using System.Xml.L
using System.Web.Script.S
using System.T
namespace HighCharts_test.JsonData
/// &summary&
/// $codebehindclassname$ 的摘要说明
/// &/summary&
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class StockData : IHttpHandler
public void ProcessRequest(HttpContext context)
context.Response.ContentType = "text/javascript";
string callback = context.Request.QueryString["callback"];
StringBuilder json = new StringBuilder();
json.Append(callback);
DataSet ds = GetStockData("600379");
json.Append(DataSetToJson(ds));
//json = serializer.Serialize(ds);
context.Response.Write(json);
public string GetUNIX(string dateTimeString)
DateTime dtStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime());
DateTime dtNow = DateTime.Parse(dateTimeString);
TimeSpan toNow = dtNow.Subtract(dtStart);
string timeStamp = toNow.Ticks.ToString();
timeStamp = timeStamp.Substring(0, timeStamp.Length - 4);
return timeS
/// &summary&
/// 将DataSet转化成JSON数据
/// &/summary&
/// &param name="ds"&&/param&
/// &returns&&/returns&
public StringBuilder DataSetToJson(DataSet ds)
string json = string.E
if (ds.Tables.Count == 0)
throw new Exception("DataSet中Tables为0");
json = "([";
for (int i = 0; i & ds.Tables[0].Rows.C i++)
json += "[";
for (int n = 0; n & ds.Tables[0].Columns.C n++)
json +=GetUNIX( ds.Tables[0].Rows[i][n].ToString()) + ",";
json += ds.Tables[0].Rows[i][n].ToString() + ",";
json = json.Substring(0, json.Length - 1);
json += "],";
json = json.Substring(0, json.Length - 1);
json += "]);";
catch (Exception ex)
throw new Exception(ex.Message);
StringBuilder sb = new StringBuilder();
sb.Append(json);
public DataSet GetStockData(string stockId)
//string sql = "select Cdate,KPJ,ZGJ,ZDJ,SPJ,JYL from CompanyStockDate where StockId=" + stockId + " and Cdate&=DATEADD(YY,-1,GETDATE()) order by Cdate asc";
string sql = "select Cdate,KPJ,ZGJ,ZDJ,SPJ,JYL from CompanyStockDate where StockId=" + stockId + " and Cdate&=DATEADD(m,-3,GETDATE()) order by Cdate asc";
DataSet ds = SqlHelper.Query(sql);
public bool IsReusable
&&&&推荐文章:
【上篇】【下篇】一直在用&highchart&在做图表，最近一段时间突然接到一活，需要用&highstock&帮客户完成一个股票K线图和分时图。虽然用法和&api上与&highchart&没什么区别，但还是研究一番做出了对应的DEMO，于是抽空与大家分享下。
预期想要达成的效果图
highstock 开发股票或者财经的分时图
引入&highstock&文件&[&这里需要重点注意了，需要引入&highstock&的版本 为&v1.2.5&版本，最新版和老版本有很大的区别，至于为什么随后在代码结束后为大家解释 ！&]
图表的初始化
1. UTC时间的设置和一些公共设置
Highcharts.setOptions({
useUTC: true
rangeSelectorZoom : '',
months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
shortMonths : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ],
weekdays : [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ]
2.&渲染图表方法
function initHourChart(){
var chart=null;
//需要请求的api action 地址
var path="/highstock/hour.json";
$.getJSON(path,function(data) {
if(data.datas.length==0)
var Price = [];
//获取首个变量的时间，用来计算获取时间的最小值和最大值
var firstData=data.datas[0].
var minTime=Date.UTC(parseInt(firstData.substring(0,4)), parseInt(firstData.substring(4,6))-1, parseInt(firstData.substring(6,8)), 8);
var maxTime=Date.UTC(parseInt(firstData.substring(0,4)), parseInt(firstData.substring(4,6))-1, parseInt(firstData.substring(6,8)), 20);
for (i = 0; i & data.datas. i++)
Price.push([
UTC(data.datas[i].updatetime),
parseFloat(data.datas[i].open)
Price.sort();
var option={
colors:['#4d73a8'],
renderTo:"container",// 需要渲染的DIV 的ID名称
alignTicks: true
navigator: false,
scrollbar: false,
rangeSelector: false,
plotOptions: {
lineWidth: 1
tickInterval:60 * 1000 * 60 *2.5,
min:minTime,
max:maxTime,
startOnTick:true,
endOntick:true,
gridLineColor: '#ccc',
gridLineDashStyle: 'dotted',
gridLineWidth: 1,
tickColor:'none',
lineColor: '#ccc',
formatter:function(){
var date = new Date(this.value)
var hours = date.getHours()
if(hours&8){
hours = hours + 24
return addZero(hours-8)+':'+addZero(date.getMinutes())
gridLineWidth: 1,
lineColor: '#f00',
align: 'right'
offset:15,
gridLineColor: '#ccc',
gridLineDashStyle: 'solid'
credits: false,
series : [{
name : '当前价',
color: '#30527e',
lineWidth: 1,
type:'line',
pointStart: minTime,
data:Price
chart=new Highcharts.StockChart(option);
3. 渲染方法里需要用到的辅助方法，如UTC 的格式化，X轴时间的格式化等等
function addZero(str){
if(str&10){
return str = '0' + str
return str
function UTC(time){
if(time==undefined) return
if (time.length & 10) {
time = '' +
return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6,8));
time = '' +
return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6, 8), time.substring(9, 11), time.substring(12, 14), time.substring(15, 17));
4.&请求的&json&格式，当然格式可以自己定义 ，但是需要修改上面方法里的属性
"datas": [
"open": 2055,
"updatetime": ":00:00",
"status": 1,
"high": 2055,
"low": 2053,
"close": 2054
"open": 2055,
"updatetime": ":01:00",
"status": 1,
"high": 2055,
"low": 2054,
"close": 2054
"open": 2055,
"updatetime": ":02:00",
"status": 1,
"high": 2055,
"low": 2055,
"close": 2055
5.&最后完成的效果图(当然样式和其他方面还得做调整)
方法解释说明
initHourChart&方法为渲染的核心方法，它先请求服务端的&json数据&，拿到&json数据&后，循环遍历开始组建图表所需要的data格式&，一个&UTC&时间戳，另外一个就是对应的数据值 。需要注意的是&xAxis&属性里需要设置&tickInterval&、&min&和&max参数，而且必须要设置。因为股票的分时图一般会有开盘时间和收盘时间，这里的&min&和&max&决定了&x&轴时间的&开始&和&结束&，tickInterval&决定了&x&的间隔时间（例子里我以2小时为间隔展示了一天的数据）。
接着我来解释为什么前面我说必须要用&v1.2.5&版本
旧版支持时间段固定显示模式，例如上图初始化 就可以显示 早上8点到晚上8点的刻度值，即使当前的数据没有16点以后的数据。而新版当没有16点以后的数据时，会无法显示后面时间段的空白区域，除非将时间点填充null的值，如果后面点有值了动态去更新。
定时器功能，我们会在load事件里增加一个定时器，动态为图表增加新的点。因为从开盘后，不是所有时间段的数据都会有。然而这点上，新版增加数据后整个线会向左移动，然后新添加的点才增加进来，具体看官网的DEMO。旧版的处理方式是图表不懂，自动在最后一个点上增加新的数据&。
附上2张图分别采用新版和旧版，解释上面2个观点&&
大家可以对比看看2张图的效果！也许新版有其他的解决方案。如果有也可以联系我与大家分享。今天就讲到这里，下篇为大家带来K线图的实例。
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如何用highstock实现股票分时图参考网站如下：欢迎大神们来指点一二
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
图表都是highstock现成的，每次传入数据后刷新图表应该就可以了
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：