highstock高级篇之股票K线图

文章目录
  1. 预期想要达成的效果图

上篇为大家讲解了股票分时的基本用法,这次接着上篇谈谈K线图,分时图和K线图都属于highstock里的功能图表,所以在使用上基本上相同,但也略有区别。

预期想要达成的效果图

####highstock 开发股票K线图

  • 准备工作

    同样引入 highstock 文件
    [ 这里可以引用最新版,也可以引用旧版的。新版增添了左上角的按钮,旧版则需要自己添加]

  • 图表的初始化

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      Highcharts.setOptions({
      global: {
      useUTC: true
      },
      lang : {
      rangeSelectorZoom : '',
      months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
      shortMonths : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
      '9月', '10月', '11月', '12月' ],
      weekdays : [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ]
      }
      });
    2. 渲染图表方法

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      172
      173
      174
      175
      176
      177
      178
      179
      180
      181
      182
      183
      184
      185
      186
      187
      188
      189
      190
      191
      192
      193
      function initKline(){
      var chart=null;
      var path = "/highstock/intraday-area.json";
      $.getJSON(path,function(result) {
      if (result.data.length == 0) {
      return;
      }
      var data = result.data;
      var ohlc = [],ave5=[],ave10=[],ave30=[], dataLength = data.length;
      for (i = 0; i < dataLength; i++) {
      ohlc.push([ data[i][0], data[i][1], data[i][2], data[i][3],data[i][4] ]);
      ave5.push([
      data[i][0],
      data[i][1]
      ]);
      ave10.push([
      data[i][0],
      data[i][2]
      ]);
      ave30.push([
      data[i][0],
      data[i][3]
      ]);
      }
      var option={
      chart:{
      width:720,
      height:400,
      renderTo:"container",
      plotBorderWidth: 1,
      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
      plotShadow: true,
      backgroundColor: {
      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
      stops: [
      [0, 'rgb(255, 255, 255)'],
      [1, 'rgb(240, 240, 255)']
      ]
      }
      },
      rangeSelector : {
      buttonSpacing:5,
      buttonTheme: {
      width:50,
      fill: 'none',
      stroke: 'none',
      'stroke-width': 0,
      r: 4,
      style: {
      color: '#039',
      fontWeight: 'bold'
      },
      states: {
      hover: {
      },
      select: {
      fill: '#039',
      style: {
      color: 'white'
      }
      }
      }
      },
      enabled: true,
      selected:0,
      inputEnabled : false,
      buttons : [ {
      type : 'day',
      count : 1,
      text : '日K'
      }, {
      type : 'day',
      count : 7,
      text : '周K'
      }, {
      type : 'month',
      count : 1,
      text : '月K'
      }, {
      type : 'minute',
      count : 5,
      text : '5分钟'
      } , {
      type : 'minute',
      count : 15,
      text : '15分钟'
      }, {
      type : 'minute',
      count : 30,
      text : '30分钟'
      }, {
      type : 'hour',
      count : 1,
      text : '60分钟'
      } ]
      },
      credits:{enabled:false},
      exporting : {
      enabled : false
      },
      colors : [ '#000000','#0000ff','#ff00ff','#f7a35c','#8085e9' ],
      title : {
      text : 'K线图实例'
      },
      yAxis : [ {
      lineWidth: 0,
      labels: {
      align: 'right',
      x: 0,
      y: 0,
      formatter: function () {
      return this.value.toFixed(0);
      }
      },
      opposite: false
      } ],
      tooltip : {
      formatter : function() {
      var s = Highcharts.dateFormat('<span> %Y-%m-%d %H:%M:%S</span>',this.x);
      s += '<br />开盘:<b>'
      +this.points[0].point.open
      + '</b><br />最高:<b>'
      + this.points[0].point.high
      + '</b><br />最低:<b>'
      + this.points[0].point.low
      + '</b><br />收盘:<b>'
      + this.points[0].point.close
      + '</b>';
      return s;
      },
      shared : true,
      useHTML : true,
      valueDecimals : 2, //有多少位数显示在每个系列的y值
      crosshairs : [ {
      color : '#b9b9b0'
      }, {
      color : '#b9b9b0'
      } ]
      },
      scrollbar : {
      enabled : true
      },
      plotOptions : {
      candlestick : {
      color : '#6d9e81',
      upColor : '#cc5444'
      },
      line : {
      marker : {
      states : {
      hover : {
      enabled : false
      },
      select : {
      enabled : true
      }
      }
      },
      states : {
      hover : {
      enabled : false
      }
      }
      }
      },
      navigator: { enabled: true },
      series : [
      {
      type : 'candlestick',
      name : '股票走势',
      data : ohlc
      },
      {
      type: 'line',
      lineWidth:0.8,
      data: ave5
      },
      {
      type: 'line',
      lineWidth:0.8,
      data: ave10
      },
      {
      type: 'line',
      lineWidth:0.8,
      data: ave30
      }
      ]
      };
      chart=new Highcharts.StockChart(option);
      });

      }

    #####方法解释说明

    1
    var ohlc = [],ave5=[],ave10=[],ave30=[]

    这三个数组分别代表 k线数据三条均线数据

    1
    ohlc.push([ data[i][0], data[i][1],	data[i][2], data[i][3],data[i][4] ]);

    注意这里参数的顺序及意义:

    • 第一个参数代表时间 必须是时间戳
    • 第二个参数代表开盘价
    • 第三个参数代表最高价
    • 第四个参数代表最低价
    • 第五个参数代表收盘价

在来谈谈rangeSelector里的buttons参数,它是个数组,里面可以定义很多按钮,类似我上面写到的,我一共设置了7个按钮,每个按钮的参数都不太一样,具体代表什么意思呢?

按钮接受三个参数typecounttext分别对应类型数值文本type 的单位可以是millisecond, second, minute, day, week, month, yearcount 代表对应单位的数值,text 对应按钮显示的文本

例如这里如果type 设置成 daycount 设置成7。点击按钮就会显示K线图最近7天的数据,其他的单位同理可得!

K线图的讲解就到这里,随后若有新的思路和idea会与大家分享