Skip to content

Commit

Permalink
chore: add 1d k chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@simaQ
simaQ committed Nov 6, 2018
1 parent 506b1fb commit 442d908
Show file tree
Hide file tree
Showing 2 changed files with 1,178 additions and 0 deletions.
376 changes: 376 additions & 0 deletions demos/1d-k-chart.html
View file
@@ -0,0 +1,376 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>日 K</title>
<link rel="stylesheet" href="./assets/common.css">
<style>
.chart-wrapper {
background-color: #101419;
}
.chart-container {
position: relative;
}
.chart-title {
width: 100%;
height: 20px;
line-height: 20px;
padding-left: 10px;
color: #676C79;
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #191E26;
}
canvas#chart {
height: 212px;
border-bottom: 1px solid #191E26;
}
canvas#volumn {
height: 50px;
border-bottom: 1px solid #191E26;
}
.tooltip-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
visibility: hidden;
padding: 0 10px;
border-bottom: 1px solid #191E26;
background-color: #101419;
}
.tooltip-item {
width: 15%;
height: 16px;
line-height: 16px;
vertical-align: middle;
}
.tooltip-item.last {
width: 40%;
}
.tooltip-item span {
display: inline;
color: #899198;
font-size: 12px;
}
.tooltip-item span.item-value {
font-weight: bold;
}
#barTooltip .tooltip-item {
width: 100%;
}

</style>
</head>

<body>
<div class="chart-wrapper">
<div class="chart-container">
<div class="chart-title">日 K</div>
<div class="tooltip-wrapper" id="kTooltip">
<div class="tooltip-item">
<span>开</span>
<span class="item-value" data-type="start"></span>
</div>
<div class="tooltip-item">
<span>收</span>
<span class="item-value" data-type="end"></span>
</div>
<div class="tooltip-item">
<span>高</span>
<span class="item-value" data-type="high"></span>
</div>
<div class="tooltip-item">
<span>低</span>
<span class="item-value" data-type="low"></span>
</div>
<div class="tooltip-item last">
<span>成交</span>
<span class="item-value" data-type="volumn"></span>
</div>
</div>
<canvas id="chart"></canvas>
</div>
<div class="chart-container">
<div class="chart-title">成交额</div>
<div class="tooltip-wrapper" id="barTooltip">
<div class="tooltip-item">
<span>成交额:</span>
<span class="item-value" data-type="volumn"></span>
</div>
</div>
<canvas id="volumn"></canvas>
</div>

</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const COLOR_MAP = [ '#FF4433', '#32A532' ]; // 涨跌
let barChart;
let kChart;
$.getJSON('./data/1d-k.json', data => {
// 构造数据结构
const reportDates = [];
data.forEach(function (obj) {
reportDates.push(obj.reportDate);
obj.range = [ obj.start, obj.end, obj.high, obj.low ];
obj.trend = (obj.start <= obj.end) ? 0 : 1; // 0 表示涨，1 表示跌
});
const firstShowDates = reportDates.slice(75);
// 绘制 K 线图
kChart = drawKChart(data, firstShowDates);
// 绘制成交量柱状图
barChart = drawBarChart(data, firstShowDates);
});

// 绘制成交量柱状图
function drawBarChart(data, firstShowDates) {
const chart = new F2.Chart({
id: 'volumn',
padding: 0,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
reportDate: {
type: 'timeCat',
values: firstShowDates
}
});
chart.axis(false);
chart.tooltip({
alwaysShow: true,
showCrosshairs: true,
crosshairsType: 'y',
crosshairsStyle: {
stroke: '#D1D3D4',
lineWidth: 1
},
showTooltipMarker: false,
custom: true,
onChange(obj) {
const currentPoint = {
x: obj.x,
y: obj.y
};
kChart.showTooltip(currentPoint);
const data = obj.items[0].origin;
$('#barTooltip .item-value').each((index, ele) => {
const type = $(ele).data('type');
const value = data[type];
$(ele).css({ color: '#FFFFFF' });
$(ele).text(value);
});
$('#barTooltip').css('visibility', 'visible');
},
onHide() {
$('#barTooltip').css('visibility', 'hidden');
}
});
chart.interval().position('reportDate*volumn')
.color('trend', val => {
return COLOR_MAP[val];
});
chart.interaction('pinch', {
onProcess(ev) {
if (this.pressed) return;
const currentValues = chart.getXScale().values; // 获取平移后的当前展示 values
kChart.scale('reportDate', {
type: 'timeCat',
values: currentValues,
ticks: ['2018-06-08', '2018-07-02', '2018-08-01', '2018-09-03', '2018-10-08', '2018-11-01']
});
kChart.repaint();
},
onEnd() {
kChart.hideTooltip();
chart.hideTooltip();
}
});
chart.interaction('pan', {
onProcess(ev) {
if (this.pressed) return;
const currentValues = chart.getXScale().values; // 获取平移后的当前展示 values
kChart.scale('reportDate', {
type: 'timeCat',
values: currentValues,
ticks: ['2018-06-08', '2018-07-02', '2018-08-01', '2018-09-03', '2018-10-08', '2018-11-01']
});
kChart.repaint();
},
onEnd() {
kChart.hideTooltip();
chart.hideTooltip();
}
});
chart.render();
return chart;
}

function drawKChart(data, firstShowDates) {
const chart = new F2.Chart({
id: 'chart',
padding: [0, 0, 18],
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
reportDate: {
type: 'timeCat',
ticks: ['2018-06-08', '2018-07-02', '2018-08-01', '2018-09-03', '2018-10-08', '2018-11-01'],
values: firstShowDates
}
});
chart.axis('reportDate', {
labelOffset: 1,
label(text, index, total) {
let textAlign = 'center';
if (index === 0) {
textAlign = 'start';
} else if (index === total - 1) {
textAlign = 'end';
}
return {
text: text.slice(0, 7),
fill: '#818991',
textAlign
};
},
line: {
stroke: '#181D26'
},
grid: {
lineWidth: 1,
stroke: '#181D26'
}
});
chart.axis('range', {
line: {
stroke: '#181D26'
},
grid: {
stroke: '#181D26'
},
labelOffset: -2,
label(text, index, total) {
const cfg = {
textAlign: 'start',
text,
fill: '#818991'
};
if (index === 0) {
cfg.textBaseline = 'bottom';
} else if (index === (total - 1)) {
cfg.textBaseline = 'top';
} else {
cfg.text = null;
}
return cfg;
}
});
chart.tooltip({
alwaysShow: true,
showCrosshairs: true,
crosshairsType: 'xy',
showXTip: true,
showYTip: true,
crosshairsStyle: {
stroke: '#D1D3D4',
lineWidth: 1
},
xTip: {
fill: '#80888F',
fontSize: 10
},
yTip(val) {
return {
fill: '#80888F',
fontSize: 10,
text: val.toFixed(3)
}
},
xTipBackground: {
fill: '#232C39',
fillOpacity: 0.75,
radius: 2
},
yTipBackground: {
fill: '#232C39',
fillOpacity: 0.75,
radius: 2
},
custom: true,
onChange(obj) {
const currentPoint = {
x: obj.x,
y: obj.y
};
barChart.showTooltip(currentPoint);
const data = obj.items[0].origin;
$('#kTooltip .item-value').each((index, ele) => {
const type = $(ele).data('type');
const value = data[type];
let color;
if (type === 'volumn') {
color = '#FFF';
} else {
color = data.trend === 0 ? COLOR_MAP[0] : COLOR_MAP[1];
}
$(ele).css({ color });
$(ele).text(value);
});
$('#kTooltip').css('visibility', 'visible');
},
onHide() {
$('#kTooltip').css('visibility', 'hidden');
}
});
chart.schema().position('reportDate*range')
.color('trend', val => {
return COLOR_MAP[val];
})
.shape('candle');

chart.interaction('pinch', {
onProcess(ev) {
if (this.pressed) return;

const currentValues = chart.getXScale().values; // 获取平移后的当前展示 values
barChart.scale('reportDate', {
type: 'timeCat',
values: currentValues
});
barChart.repaint();
},
onEnd() {
barChart.hideTooltip();
chart.hideTooltip();
}
});
chart.interaction('pan', {
onProcess(ev) {
if (this.pressed) return; // TODO, 这个标识位好恶心

const currentValues = chart.getXScale().values; // 获取平移后的当前展示 values
barChart.scale('reportDate', {
type: 'timeCat',
values: currentValues
});
barChart.repaint();
},
onEnd() {
barChart.hideTooltip();
chart.hideTooltip();
}
});
chart.render();
return chart;
}
</script>
</body>

</html>

0 comments on commit 442d908

Please sign in to comment.