Highstock做类似股票K线的线状图，x轴是时间格式，当x轴时间数据时间间隔不同时间，图表无法显示

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Highstock做类似股票K线的线状图，x轴是时间格式，当x轴时间数据时间间隔不同时间，图表无法显示相关的知识，希望对你有一定的参考价值。

x轴设置
xAxis:
type: 'datetime',
tickPixelInterval:240,
title:
text: null
,
dateTimeLabelFormats:
second: '%H:%M:%S',
minute: '%m-%e %H:%M',
hour: '%m-%e %H:%M',
day: '%m-%e %H:%M',
week: '%e. %m',
month: '%y-%m',
year: '%Y'


Y轴：
yAxis :
title:
text: null
,
min: 0,
startOnTick: true,
showFirstLabel: true

数据：
series: [
name:‘温度',
data:
]
当data值是 [[Date.UTC(2013,7,13,15,33,06),6],[Date.UTC(2013,7,13,15,34,06),6],[Date.UTC(2013,7,13,15,35,06),6]]是可以正常显示，当时间价格不一致，比如第三个数据是[Date.UTC(2013,7,13,15,36,06),6]，即，第一组跟第二组时间间隔差别1分钟，第二组跟第三组数时间间隔差别2分钟时，报错如图所示：

难道，highstock时间轴必须时间间隔要一致吗？

　　它的时间轴只要保持升序就行，时间间隔无须一致。你这里出现这样的情况，应该是别的地方使用到了里面的值造成的。
　　另外对于数据，必须要是Number型的才行，不能是String类型的数字。 参考技术A 它的时间轴只要保持升序就行，时间间隔无须一致。你这里出现这样的情况，应该是别的地方使用到了里面的值造成的。
　　另外对于数据，必须要是Number型的才行，不能是String类型的数字。
有更多的股票问题建议关注薇幸公众号：shlmcp 回复关键：福利 有你更多的人生惊喜财富。

highstock高级篇之股票分时图

一直在用 highchart 在做图表，最近一段时间突然接到一活，需要用 highstock 帮客户完成一个股票K线图和分时图。虽然用法和 api上与 highchart 没什么区别，但还是研究一番做出了对应的DEMO，于是抽空与大家分享下。

预期想要达成的效果图

技术分享

highstock 开发股票或者财经的分时图

 

准备工作

引入 highstock 文件 
[ 这里需要重点注意了，需要引入 highstock 的版本 为 v1.2.5 版本，最新版和老版本有很大的区别，至于为什么随后在代码结束后为大家解释 ！ ]

 

 

图表的初始化

 

1. UTC时间的设置和一些公共设置

Highcharts.setOptions({
        global: {                                                               
            useUTC: true                                                       
        }, 
        lang : {
            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)
        {
            return;
        }
        var Price = [];
        //获取首个变量的时间，用来计算获取时间的最小值和最大值
        var firstData=data.datas[0].updatetime;
        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.length; i++)
        {
               Price.push([
                   UTC(data.datas[i].updatetime),
                   parseFloat(data.datas[i].open) 
               ]);
        }
        Price.sort();
        var option={
            colors:[‘#4d73a8‘],
            chart: {             
              renderTo:"container",// 需要渲染的DIV 的ID名称
              alignTicks: true
            }, 
             navigator: false,
             scrollbar: false,
             rangeSelector: false,
             plotOptions: {
                 line: {
                   lineWidth: 1
                 }
             },
             xAxis:[{
                    tickInterval:60 * 1000 * 60 *2.5,
                    min:minTime,
                    max:maxTime,
                    startOnTick:true,
                    endOntick:true,
                    gridLineColor: ‘#ccc‘,
                    gridLineDashStyle: ‘dotted‘,
                    gridLineWidth: 1,
                    tickColor:‘none‘,
                    lineColor: ‘#ccc‘,
                       labels:{
                           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())
                             }
                       }
             }],
             yAxis:[{ 
                      gridLineWidth: 1,
                      lineColor: ‘#f00‘,
                      labels: {
                          align: ‘right‘
                      },
                      offset:15,
                      min:0,
                      gridLineColor: ‘#ccc‘,
                      gridLineDashStyle: ‘solid‘
                }],
             credits: false,
             series : [{
                name : ‘当前价‘,
                   color: ‘#30527e‘,
                   lineWidth: 1,
                   type:‘line‘,
                   yAxis:0,
                   xAxis:0,
                   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 = ‘‘ + time;
            return Date.UTC(time.substring(0, 4), time.substring(4, 6) - 1, time.substring(6,8));
          } else {
            time = ‘‘ + 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": "20150129 08:00:00",
           "status": 1,
           "high": 2055,
           "low": 2053,
           "close": 2054
       },
       {
           "open": 2055,
           "updatetime": "20150129 08:01:00",
           "status": 1,
           "high": 2055,
           "low": 2054,
           "close": 2054
       },
       {
           "open": 2055,
           "updatetime": "20150129 08:02:00",
           "status": 1,
           "high": 2055,
           "low": 2055,
           "close": 2055
       }]
}

5. 最后完成的效果图(当然样式和其他方面还得做调整)

    1. 技术分享 
      技术分享

      方法解释说明

      initHourChart 方法为渲染的核心方法，它先请求服务端的 json数据 ，拿到 json数据 后，循环遍历开始组建图表所需要的data格式 ，一个 UTC 时间戳，另外一个就是对应的数据值 。需要注意的是 xAxis 属性里需要设置 tickInterval 、 min 和 max参数，而且必须要设置。因为股票的分时图一般会有开盘时间和收盘时间，这里的 min 和 max 决定了 x 轴时间的 开始 和 结束 ，tickInterval 决定了 x 的间隔时间（例子里我以2小时为间隔展示了一天的数据）。

    接着我来解释为什么前面我说必须要用 v1.2.5 版本

    1. 旧版支持时间段固定显示模式，例如上图初始化 就可以显示 早上8点到晚上8点的刻度值，即使当前的数据没有16点以后的数据。而新版当没有16点以后的数据时，会无法显示后面时间段的空白区域，除非将时间点填充null的值，如果后面点有值了动态去更新。
    2. 定时器功能，我们会在load事件里增加一个定时器，动态为图表增加新的点。因为从开盘后，不是所有时间段的数据都会有。然而这点上，新版增加数据后整个线会向左移动，然后新添加的点才增加进来，具体看官网的DEMO。旧版的处理方式是图表不懂，自动在最后一个点上增加新的数据 。

    附上2张图分别采用新版和旧版，解释上面2个观点 
    技术分享 
    技术分享

大家可以对比看看2张图的效果！也许新版有其他的解决方案。如果有也可以联系我与大家分享。今天就讲到这里，下篇为大家带来K线图的实例。





以上是关于Highstock做类似股票K线的线状图，x轴是时间格式，当x轴时间数据时间间隔不同时间，图表无法显示的主要内容，如果未能解决你的问题，请参考以下文章

在 highstock 上对齐 y 轴刻度“外部”，因此它们与 highcharts 上的相同

Origin点线图如何做？

Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

动态更新echart成交量柱状图，并且不重绘，类似K线的更新方式

股票软件K线图中VOL-TDX右边的数字：7500；5000；x10,表示啥意思？如下图

股票入门　教你如何详解分析K线