light-chart
Version:
Charts for mobile visualization.
212 lines (210 loc) • 4.93 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>股票图</title>
<link rel="stylesheet" href="./assets/common.css">
<style>
.chart-wrapper {
position: relative;
}
.tooltip-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
visibility: hidden;
padding: 0 10px;
border-bottom: 1px solid #ddd;
}
.tooltip-item {
width: 19.5%;
height: 24px;
line-height: 24px;
vertical-align: middle;
}
.tooltip-item.first {
width: 20%;
}
.tooltip-item span {
display: inline;
color: #899198;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="chart-wrapper">
<div class="tooltip-wrapper" id="tooltip">
<div class="tooltip-item first">
<span class="item-value" data-type="time"></span>
</div>
<div class="tooltip-item">
<span>高</span>
<span class="item-value" data-type="max"></span>
</div>
<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="min"></span>
</div>
<div class="tooltip-item">
<span>收</span>
<span class="item-value" data-type="end"></span>
</div>
</div>
<canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
$.getJSON('./data/candle.json',function(data){
const BASIC_PRICE = 6.95;
// 数据处理，按照时间排序
data.sort(function(obj1, obj2) {
return obj1.time > obj2.time ? 1 : -1;
});
data.forEach(function(obj) {
obj.range = [ obj.start, obj.end, obj.max, obj.min ];
obj.trend = (obj.start <= obj.end) ? 0 : 1;
});
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
range: {
tickCount: 5,
formatter(val) {
return val.toFixed(2);
}
},
time: {
tickCount: 3
}
});
chart.tooltip({
showCrosshairs: true,
showXTip: true,
showYTip: true,
crosshairsType: 'xy',
custom: true,
yTip(val) {
return {
text: val.toFixed(2),
fill: '#333',
fontSize: 10
}
},
xTip: {
fill: '#333',
fontSize: 10
},
xTipBackground: {
fill: '#EDF2FE'
},
yTipBackground: {
fill: '#EDF2FE'
},
crosshairsStyle: {
stroke: '#0F8DE8'
},
onChange(obj) {
const data = obj.items[0].origin;
$('#tooltip .item-value').each((index, ele) => {
const type = $(ele).data('type');
const value = data[type];
let color;
if (type === 'time') {
color = '#000000';
} else {
color = data.trend === 0 ? '#F4333C' : '#1CA93D';
}
$(ele).css({ color });
$(ele).text(value);
});
$('#tooltip').css('visibility', 'visible');
},
onHide() {
$('#tooltip').css('visibility', 'hidden');
}
});
chart.axis('range', {
grid: {
stroke: '#ddd',
lineWidth: 1,
lineDash: null
},
label: {
fill: '#999'
}
});
chart.axis('time', {
label(text, index, total) {
const textCfg = {
fill: '#999'
};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
},
grid: {
lineWidth: 1,
stroke: '#ddd'
}
});
chart.guide().line({
start: [ 'min', BASIC_PRICE ],
end: [ 'max', BASIC_PRICE ],
style: {
lineDash: [ 8 ],
stroke: '#F68300'
}
});
chart.guide().text({
position: ['min', BASIC_PRICE],
content: BASIC_PRICE,
style: {
fill: '#808080',
textAlign: 'start',
textBaseline: 'bottom',
fontSize: 10,
fontWeight: 'bold'
},
offsetX: 2
});
chart.guide().rect({
start: [ '0%', '0%' ],
end: [ '100%', '100%' ],
style: {
stroke: '#ddd',
lineWidth: 1,
fill: '#fff',
opacity: 1,
fillOpacity: 0
}
});
chart.schema().position('time*range')
.color('trend', function(trend) {
return [ '#F4333C', '#1CA93D' ][trend];
})
.shape('candle');
chart.render();
});
</script>
</body>
</html>