G2-mobile 图表示例
源码
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>股票图</title>
6
    <script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
7
  </head>
8
  <body>
9
    <div style="width:416px;height:218px;margin:0 auto">
10
      <canvas id="c1" style="width:416px;height:218px;"></canvas>
11
    </div>
12
    <script src="/static/jquery.js"></script>
13
    <script>
14
      var Util = GM.Util;
15
      GM.Global.pixelRatio = 2;
16
      //获取本地数据
17
      $.getJSON('../../../static/data/mobileCandleSticks.json',function(data){
18
        //数据处理
19
        data.sort(function(obj1, obj2){
20
          return obj1.time > obj2.time ? 1 : -1;
21
        });
22
        data.forEach(function(obj) {
23
          obj.range = [obj.start, obj.end, obj.max, obj.min];
24
          obj.trend = (obj.start <= obj.end) ? 0 : 1;
25
        });
26
        var chart = new GM.Chart({
27
          id: 'c1'
28
        });
29
        //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
30
        chart.axis('range', {
31
          label: {
32
            fontSize: 14
33
          }
34
        });
35
        //配置time刻度文字样式
36
        var label = {
37
          fill: '#979797',
38
          font: '14px san-serif',
39
          offset: 6
40
        };
41
        chart.axis('time', {
42
          label: function (text, index, total) {
43
            var cfg = Util.mix({}, label);
44
            // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
45
            if (index === 0) {
46
              cfg.textAlign = 'start';
47
            }
48
            if (index > 0 && index === total - 1) {
49
              cfg.textAlign = 'end';
50
            }
51
            return cfg;
52
          }
53
        });
54
        chart.source(data, {
55
          range: {
56
            tickCount: 5
57
          },
58
          time: {
59
            tickCount: 3
60
          }
61
        });
62
        chart.schema().position('time*range')
63
          .color('trend', function(trend){
64
          return ['#C00000','#19B24B'][trend];
65
        })
66
          .shape('candle');
67
        chart.render();
68
      });
69
    </script>
70
  </body>
71
</html>
72
​

股票图

K 线图，原名蜡烛图，又称阴阳图、棒线、红黑线或蜡烛线，常用于展示股票交易数据。 了解更多