light-chart
Version:
Charts for mobile visualization.
192 lines (184 loc) • 4.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信步数</title>
<link rel="stylesheet" href="./assets/common.css">
<style>
.chartWrapper {
position: relative;
width: 94.93vw;
height: 53.87vw;
margin: 0 auto;
border-radius: 4px;
/* Rectangle 8: */
background-image: linear-gradient(135deg, #17BE81 0%, #1494a3 100%);
}
canvas#mountNode {
display: block;
width: 100%;
height: 42.67vw;
}
.chartHeader {
height: 11vw;
margin: 0 3.33vw;
box-shadow: 0 1px 0 0 #77C0B3;
line-height: 11vw;
text-align: right;
color: #CFFFF2;
font-size: 6.13vw;
}
.chartTooltip {
position: absolute;
z-index: 99;
font-size: 3.2vw;
color: rgba(207, 254, 255, .8);
text-align: center;
top: 38vw;
left: 0;
margin-top: 3px;
visibility: hidden;
transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1)
}
</style>
</head>
<body>
<div class="chartWrapper">
<div class="chartHeader"></div>
<canvas id="mountNode"></canvas>
<!-- 自定义 tooltip -->
<div class="chartTooltip" id="tooltip"></div>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ date: '2018-04-21', steps: 59 },
{ date: '2018-04-22', steps: 2515 },
{ date: '2018-04-23', steps: 6524 },
{ date: '2018-04-24', steps: 26044 },
{ date: '2018-04-25', steps: 29763 },
{ date: '2018-04-26', steps: 10586 },
{ date: '2018-04-27', steps: 14758 },
{ date: '2018-04-29', steps: 549 },
{ date: '2018-04-30', steps: 21 },
{ date: '2018-05-01', steps: 1069 },
{ date: '2018-05-02', steps: 7918 },
{ date: '2018-05-03', steps: 5381 },
{ date: '2018-05-04', steps: 11549 },
{ date: '2018-05-06', steps: 19461 },
{ date: '2018-05-07', steps: 22487 },
{ date: '2018-05-08', steps: 11062 },
{ date: '2018-05-09', steps: 7101 },
{ date: '2018-05-10', steps: 12776 },
{ date: '2018-05-11', steps: 12919 },
{ date: '2018-05-12', steps: 7216 },
{ date: '2018-05-13', steps: 4867 },
{ date: '2018-05-14', steps: 8725 },
{ date: '2018-05-15', steps: 8983 },
{ date: '2018-05-16', steps: 22348 },
{ date: '2018-05-17', steps: 17142 },
{ date: '2018-05-18', steps: 8715 },
{ date: '2018-05-19', steps: 3861 },
{ date: '2018-05-20', steps: 8 },
{ date: '2018-05-21', steps: 24365 },
{ date: '2018-05-22', steps: 14271 }
];
$('.chartHeader').text('步数：' + data[data.length - 1].steps);
// 创建区域图的渐变色
const canvas = document.getElementById('mountNode');
const ctx = canvas.getContext('2d');
const grd = ctx.createLinearGradient(0, canvas.offsetHeight, 0, 0);
grd.addColorStop(0.03, "rgba(216,216,216,0.10)");
grd.addColorStop(1, "#6CD8B7");
const chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio,
padding: [ 20, 30, 'auto', 'auto' ]
});
chart.source(data, {
date: {
type: 'timeCat',
range: [ 0, 1 ],
mask: 'MM-D'
},
steps: {
ticks: [ 10000 ],
formatter(val) {
return val === 10000 ? '1W' : 0;
}
}
});
chart.axis('date', {
line: {
stroke: '#75C2B4'
},
label(text, index, total) {
const cfg = {
textAlign: 'center',
fill: '#5FD3C2',
fontSize: 12
};
if (index === 0) {
cfg.textAlign = 'start';
cfg.text = text.split('-').join('月');
} else {
cfg.text = text.split('-')[1];
}
if (index === total - 1) {
cfg.textAlign = 'end';
cfg.fill = '#B5FFFD';
}
return cfg;
}
})
chart.axis('steps', {
position: 'right',
label: {
fill: '#71CDCD',
fontSize: 9
},
grid: {
stroke: '#77C0B3'
}
});
chart.tooltip({
custom: true,
showCrosshairs: true,
showTooltipMarker: false,
crosshairsStyle: {
lineDash: [ 2 ],
stroke: '#77C0B3'
},
onChange(e) {
const item = e.items[0];
const origin = item.origin;
const tooltipEl = $('#tooltip');
tooltipEl.text(origin.steps);
// 设置 tooltip 位置
const canvasOffsetTop = $('#mountNode').position().top;
const canvasOffsetLeft = $('#mountNode').position().left;
const tooltipWidth = tooltipEl.outerWidth();
tooltipEl.css({
visibility: 'visible',
left: canvasOffsetLeft + item.x - tooltipWidth / 2,
top: canvasOffsetTop
});
},
onHide() {
const tooltipEl = $('#tooltip');
tooltipEl.css({
visibility: 'hidden'
});
}
});
chart.area().position('date*steps').style({
fill: grd,
fillOpacity: 1
});
chart.line().position('date*steps').color('#A0FFF8').size(1.5);
chart.point().position('date*steps').color('#8CFFF6').size(3);
chart.render();
</script>
</body>
</html>