light-chart
Version:
Charts for mobile visualization.
141 lines (136 loc) • 3.35 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心率记录</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode" style="position: relative;">
</canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ date: '9/14/2015', rate: 85 },
{ date: '9/15/2015', rate: 60 },
{ date: '9/16/2015', rate: 59 },
{ date: '9/17/2015', rate: 55 },
{ date: '9/18/2015', rate: 80 },
{ date: '9/21/2015', rate: 98 },
{ date: '9/22/2015', rate: 96 },
{ date: '9/23/2015', rate: 84 },
{ date: '9/24/2015', rate: 84 },
{ date: '9/25/2015', rate: 96 },
{ date: '9/28/2015', rate: 84 },
{ date: '9/29/2015', rate: 60 },
{ date: '9/30/2015', rate: 90 },
{ date: '10/1/2015', rate: 63 },
{ date: '10/2/2015', rate: 88 },
{ date: '10/5/2015', rate: 110 },
{ date: '10/6/2015', rate: 100 },
{ date: '10/7/2015', rate: 120 },
{ date: '10/8/2015', rate: 80 },
{ date: '10/9/2015', rate: 113 },
{ date: '10/12/2015', rate: 116 },
{ date: '10/13/2015', rate: 96 },
{ date: '10/14/2015', rate: 100 },
{ date: '10/15/2015', rate: 102 },
{ date: '10/16/2015', rate: 90 },
{ date: '10/19/2015', rate: 96 },
{ date: '10/20/2015', rate: 130 },
{ date: '10/21/2015', rate: 145 },
{ date: '10/22/2015', rate: 103 },
{ date: '10/23/2015', rate: 102 },
{ date: '10/26/2015', rate: 155 },
{ date: '10/27/2015', rate: 100 },
{ date: '10/28/2015', rate: 104 },
{ date: '10/29/2015', rate: 97 },
{ date: '10/30/2015', rate: 98 },
{ date: '11/2/2015', rate: 116 },
{ date: '11/3/2015', rate: 95 },
{ date: '11/4/2015', rate: 93 },
{ date: '11/5/2015', rate: 92 },
{ date: '11/6/2015', rate: 99 },
{ date: '11/9/2015', rate: 75 },
{ date: '11/10/2015', rate: 110 },
{ date: '11/11/2015', rate: 76 },
{ date: '11/12/2015', rate: 82 },
{ date: '11/13/2015', rate: 107 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio,
padding: [ 'auto', 'auto', 60 ]
});
chart.source(data, {
date: {
ticks: [ '9/14/2015', '10/1/2015', '11/2/2015' ]
}
});
chart.axis('date', {
label: {
textAlign: 'start'
},
tickLine: {
length: 5,
stroke: '#E8E8E8'
}
});
chart.line().position('date*rate');
// 标域，心率过低
chart.guide()
.regionFilter({
start: [ 'min', 'min' ],
end: [ 'max', 60 ],
color: '#1AC44D'
});
chart.guide().rect({
start: [ 'min', 'min' ],
end: [ 'max', 60 ],
style: {
fill: '#e8e8e8',
opacity: 0.2
}
});
chart.guide().text({
position: [ 'max', 50 ],
content: '心率过低',
offsetX: -5,
style: {
fill: '#1AC44D',
textAlign: 'end'
}
});
// 标域，心率过高
chart.guide()
.regionFilter({
start: [ 'min', 100 ],
end: [ 'max', 'max' ],
color: '#FF7875'
});
chart.guide().rect({
start: [ 'min', 100 ],
end: [ 'max', 'max' ],
style: {
fill: '#e8e8e8',
opacity: 0.2
}
});
chart.guide().text({
position: [ 'max', 130 ],
content: '心率过高',
offsetX: -5,
style: {
fill: '#FF7875',
textAlign: 'end'
}
});
chart.render();
</script>
</body>
</html>