G2 - 股票图与线图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>股票图与线图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.2.1/slider.js"></script>
<script>
function splitData(rawData) {
  var values = [];
  for (var i = 0; i < rawData.length; i++) {
    var item = rawData[i];
    values.push(item.slice(1, 5));
  }
  return {
    'md5': calculateMA(5, values),
    'md10': calculateMA(10, values),
    'md20': calculateMA(20, values),
    'md30': calculateMA(30, values)
  };
}

function calculateMA(dayCount, data) {
  var result = [];
  for (var i = 0, len = data.length; i < len; i++) {
    if (i < dayCount) {
      result.push(null);
      continue;
    }
    var sum = 0;
    for (var j = 0; j < dayCount; j++) {
      sum += data[i - j][1];
    }
    result.push(+(sum / dayCount).toFixed(3));
  }
  return result;
}

$('<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',
    forceFit: true,
    height: 250,
    plotCfg: {
      margin: [60, 20, 30, 80]
    }
  });

  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.legend({
    position: 'top'
  });
  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',
    forceFit: true,
    height: 60,
    plotCfg: {
      margin: [0, 20, 10, 80]
    }
  });
  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
    height: 26,
    xDim: 'date',
    yDim: 'end',
    charts: [chart, chart1],
    start: '2015-06-04',
    end: '2016-01-15'
  });
  slider.render();
});
</script>

      </body>
    </html>
          
        

股票图与线图

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>股票图与线图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    function splitData(rawData) {
      var values = [];
      for (var i = 0; i < rawData.length; i++) {
        var item = rawData[i];
        values.push(item.slice(1, 5));
      }
      return {
        'md5': calculateMA(5, values),
        'md10': calculateMA(10, values),
        'md20': calculateMA(20, values),
        'md30': calculateMA(30, values)
      };
    }

$('<div id="slider"></div>').insertAfter('#c1');

var chart1 = new G2.Chart({
        id: 'c1',
        forceFit: true,
        height: 60,
        plotCfg: {
          margin: [0, 20, 10, 80]
        }
      });
      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
        height: 26,
        xDim: 'date',
        yDim: 'end',
        charts: [chart, chart1],
        start: '2015-06-04',
        end: '2016-01-15'
      });
      slider.render();
    });

self.setState({
            data: frame
          });
        }).catch(function (error) {
          console.log(error);
        });
      },
      render() {
        var data = this.state.data;
        if (data instanceof G2.Frame) {
          data = data.toJSON();
        }
        if (data.length === 0) {
          return (<div></div>);
        } else {
          return (
            <div>
              <Chart
                data={this.state.data}
                width={this.state.width}
                height={this.state.height}
                plotCfg={this.state.plotCfg}
                forceFit={this.state.forceFit} />
            </div>
          );
        }
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>
<script src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.2.1/slider.js"></script>

</body>
    </html>