1 | import React from 'react';
|
2 | import ReactDOM from 'react-dom';
|
3 | import G2 from '@antv/g2';
|
4 | window.G2 = G2;
|
5 | import Slider from 'bizcharts-slider'
|
6 | import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
|
7 | import DataSet from '@antv/data-set';
|
8 | import data from './data/candle-sticks.json';
|
9 |
|
10 | const { Line, Region } = Guide;
|
11 |
|
12 | const cols = {
|
13 | 'time': {
|
14 | type: 'timeCat',
|
15 | nice: false,
|
16 | range: [ 0, 1 ]
|
17 | },
|
18 | trend: {
|
19 | values: [ '上涨', '下跌' ]
|
20 | },
|
21 | 'volumn': {alias: '成交量'},
|
22 | 'start': {alias: '开盘价'},
|
23 | 'end': {alias: '收盘价'},
|
24 | 'max': {alias: '最高价'},
|
25 | 'min': {alias: '最低价'},
|
26 | 'range': {alias: '股票价格'}
|
27 | }
|
28 |
|
29 | const ds = new DataSet({
|
30 | state: {
|
31 | start: '2015-04-07',
|
32 | end: '2015-07-28'
|
33 | }
|
34 | });
|
35 | const dv = ds.createView();
|
36 | dv.source(data)
|
37 | .transform({
|
38 | type: 'filter',
|
39 | callback: obj => {
|
40 | const date = obj.time;
|
41 | return date <= ds.state.end && date >= ds.state.start;
|
42 | }
|
43 | })
|
44 | .transform({
|
45 | type: 'map',
|
46 | callback: obj => {
|
47 | obj.trend = (obj.start <= obj.end) ? '上涨' : '下跌';
|
48 | obj.range = [ obj.start, obj.end, obj.max, obj.min ];
|
49 | return obj;
|
50 | }
|
51 | });
|
52 |
|
53 | export default class SliderGuide extends React.Component {
|
54 | constructor() {
|
55 | super();
|
56 | this.state = {
|
57 | start: ds.state.start,
|
58 | end: ds.state.end
|
59 | }
|
60 | }
|
61 | onChange = (obj) => {
|
62 | const { startText, endText} = obj;
|
63 | ds.setState('start', startText);
|
64 | ds.setState('end', endText);
|
65 | this.setState({
|
66 | start: startText,
|
67 | end: endText
|
68 | });
|
69 | }
|
70 |
|
71 | render() {
|
72 | return (
|
73 | <div>
|
74 | <Chart height={window.innerHeight - 50} animate={false} padding={[ 10, 40, 40, 40 ]} data={dv} scale={cols} forceFit>
|
75 | <Legend offset={20} />
|
76 | <Tooltip showTitle={false} itemTpl='<li data-index={index}><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}{value}</li>' />
|
77 | <View end={{x: 1,y: 0.5}} data={dv}>
|
78 | <Axis name="time" />
|
79 | <Axis name="range" />
|
80 | <Guide>
|
81 | <Line
|
82 | start= {[this.state.start, 10]}
|
83 | end= {[this.state.end, 10]}
|
84 | lineStyle= {{
|
85 | stroke: '#F04134',
|
86 | lineWidth: 1,
|
87 | }}
|
88 | />
|
89 | </Guide>
|
90 | <Geom
|
91 | type='schema'
|
92 | position="time*range"
|
93 | color={['trend', val => {
|
94 | if (val === '上涨') {
|
95 | return '#f04864';
|
96 | }
|
97 |
|
98 | if (val === '下跌') {
|
99 | return '#2fc25b';
|
100 | }
|
101 | }]}
|
102 | tooltip={['time*start*end*max*min', (time, start, end, max, min) => {
|
103 | return {
|
104 | name: time,
|
105 | value: '<br><span style="padding-left: 16px">开盘价:' + start + '</span><br/>'
|
106 | + '<span style="padding-left: 16px">收盘价:' + end + '</span><br/>'
|
107 | + '<span style="padding-left: 16px">最高价:' + max + '</span><br/>'
|
108 | + '<span style="padding-left: 16px">最低价:' + min + '</span>'
|
109 | };
|
110 | }]}
|
111 | shape="candle"
|
112 | />
|
113 | </View>
|
114 | </Chart>
|
115 | <div>
|
116 | <Slider padding={[ 20, 40, 20, 40 ]} width='auto' height={26} start={ds.state.start} end={ds.state.end}
|
117 | xAxis="time" yAxis='volumn' scales={{time:{type: 'timeCat',nice: false,}}} data={data}
|
118 | onChange={this.onChange}
|
119 | />
|
120 | </div>
|
121 | </div>
|
122 | );
|
123 | }
|
124 | }
|