106 lines
2.4 KiB
HTML
106 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<meta name="geometry" content="diagram">
|
||
|
|
<link rel="stylesheet" href="./assets/common.css">
|
||
|
|
<title>DataSet State</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="canvas1"></div>
|
||
|
|
<div id="canvas2"></div>
|
||
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||
|
|
<script src="./assets/data-set.min.js"></script>
|
||
|
|
<script src="./assets/g2.min.js"></script>
|
||
|
|
<script src="../build/g2-brush.js"></script>
|
||
|
|
<script>
|
||
|
|
$.getJSON('./data/sp500.json', function(data) {
|
||
|
|
const ds = new DataSet({
|
||
|
|
state: {
|
||
|
|
dates: null
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const totalDv = ds.createView().source(data);
|
||
|
|
const dv = ds.createView();
|
||
|
|
dv.source(data)
|
||
|
|
.transform({
|
||
|
|
type: 'filter',
|
||
|
|
callback: obj => {
|
||
|
|
if (ds.state.dates) {
|
||
|
|
return ds.state.dates.indexOf(obj.date) > -1;
|
||
|
|
}
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const chart1 = new G2.Chart({
|
||
|
|
container: 'canvas1',
|
||
|
|
forceFit: true,
|
||
|
|
height: window.innerHeight * (4 / 5),
|
||
|
|
animate: false,
|
||
|
|
padding: [ 50, 40, 50, 80 ]
|
||
|
|
});
|
||
|
|
chart1.source(dv, {
|
||
|
|
date: {
|
||
|
|
tickCount: 10,
|
||
|
|
type: 'time',
|
||
|
|
mask: 'MMM D YYYY'
|
||
|
|
},
|
||
|
|
price: {
|
||
|
|
min: totalDv.min('price'),
|
||
|
|
max: totalDv.max('price')
|
||
|
|
}
|
||
|
|
});
|
||
|
|
chart1.area()
|
||
|
|
.position('date*price')
|
||
|
|
.shape('smooth')
|
||
|
|
.opacity(0.85);
|
||
|
|
chart1.render();
|
||
|
|
|
||
|
|
// second chart
|
||
|
|
const chart2 = new G2.Chart({
|
||
|
|
container: 'canvas2',
|
||
|
|
forceFit: true,
|
||
|
|
height: window.innerHeight * (1.5 / 5),
|
||
|
|
padding: [ 5, 40, 60, 80 ]
|
||
|
|
});
|
||
|
|
chart2.source(data, {
|
||
|
|
date: {
|
||
|
|
tickCount: 10,
|
||
|
|
type: 'time',
|
||
|
|
mask: 'YYYY'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
chart2.tooltip(false);
|
||
|
|
chart2.axis('price', false);
|
||
|
|
chart2.area()
|
||
|
|
.position('date*price')
|
||
|
|
.active(false)
|
||
|
|
.shape('smooth')
|
||
|
|
.opacity(0.85);
|
||
|
|
chart2.render();
|
||
|
|
|
||
|
|
new Brush({
|
||
|
|
canvas: chart2.get('canvas'),
|
||
|
|
chart: chart2,
|
||
|
|
type: 'X',
|
||
|
|
dragable: true,
|
||
|
|
onBrushmove(ev) {
|
||
|
|
const { date } = ev;
|
||
|
|
ds.setState('dates', date);
|
||
|
|
},
|
||
|
|
onDragmove(ev) {
|
||
|
|
const { date } = ev;
|
||
|
|
ds.setState('dates', date);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|
||
|
|
|