G2 - The Grammar Of Graphics

股票图 / 股票图与线图

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>股票图与线图</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.0.0/slider.js"></script>

$('<div id="slider"></div>').insertAfter('#c1');
$.getJSON('../../static/data/Dow-johns.json',function(data){
  var source = [];
  var values = splitData(data);
  for(var i = 0, l = data.length; i < l; i++) {
    var item = {};
    var arr = data[i];
    item.date = new Date(arr[0]).getTime();
    item.start = arr[1];
    item.end = arr[2];
    item.lowest = arr[3];
    item.highest = arr[4];
    if (arr[1] <= arr[2]) {
      item.trend = 'up';
    } else {
      item.trend = 'down';
    }
    item.volumn = arr[5];
    item.md5 = values.md5[i];
    item.md10 = values.md10[i];
    item.md20 = values.md20[i];
    item.md30 = values.md30[i];
    source.push(item);
  }
  var Frame = G2.Frame;
  var frame = new Frame(source);
  frame = Frame.combinColumns(frame, ['md5','md10','md20','md30'], 'value', 'type');

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 350,
    plotCfg: {
      margin: [30, 120, 30]
    }
  });

chart.source(frame, {
    'date': {
      type: 'time',
      mask: 'yyyy-mm-dd'
    }
  });
  chart.axis('date', {
    title: null
  });
  chart.axis('start+end+highest+lowest', {
    title: null
  });
  chart.axis('value', false);
  chart.tooltip({
    crosshairs: true
  });
  chart.schema()
    .position('date*(start+end+highest+lowest)')
    .color('trend', ['#8F454A','#39495E'])
    .shape('candle')
    .tooltip('start*end*highest*lowest');
  chart.line().position('date*value').color('type', ['#AC4640', '#2D3C48', '#609099', '#BE7459']);

var chart1 = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 100,
    plotCfg: {
      margin: [0, 120, 10]
    }
  });
  chart1.source(frame, {
    'date': {
      type: 'time',
      mask: 'yyyy-mm-dd'
    }
  });

chart1.axis('date', {
    title: null,
    labels: null,
    tickLine: null,
    line: {
      stroke: '#444'
    }
  });
  chart1.axis('volumn', false);

chart1.interval()
        .position('date*volumn')
        .color('#81BC9D')
        .tooltip('volumn');
  chart1.legend('trend', false);
  var slider = new G2.Plugin.slider({
    domId: 'slider', //DOM id
    width: 1000,
    height: 26,
    xDim: 'date',
    yDim: 'end',
    charts: [chart, chart1],
    start: '2015-06-04',
    end: '2016-01-15'
  });
  slider.render();
});
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.0.0/slider.js"></script>

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 350,
    plotCfg: {
      margin: [30, 120, 30]
    }
  });

chart1.axis('date', {
    title: null,
    labels: null,
    tickLine: null,
    line: {
      stroke: '#444'
    }
  });
  chart1.axis('volumn', false);

</body>
  </html>

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 350,
    plotCfg: {
      margin: [30, 120, 30]
    }
  });

chart1.axis('date', {
    title: null,
    labels: null,
    tickLine: null,
    line: {
      stroke: '#444'
    }
  });
  chart1.axis('volumn', false);

股票图与线图

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