light-chart
Version:
Charts for mobile visualization.
72 lines (69 loc) • 1.76 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变填充面积图</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ time: '2016-08-08 00:00:00', tem: 10},
{ time: '2016-08-08 00:10:00', tem: 22},
{ time: '2016-08-08 00:30:00', tem: 16},
{ time: '2016-08-09 00:35:00', tem: 26},
{ time: '2016-08-09 01:00:00', tem: 12},
{ time: '2016-08-09 01:20:00', tem: 26},
{ time: '2016-08-10 01:40:00', tem: 18},
{ time: '2016-08-10 02:00:00', tem: 26},
{ time: '2016-08-10 02:20:00', tem: 12}
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
time: {
type: 'timeCat',
tickCount: 3,
range: [ 0, 1 ]
},
tem: {
tickCount: 5,
min: 0
}
});
chart.axis('time', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
const canvas = document.getElementById('mountNode');
const ctx = canvas.getContext('2d');
const grd = ctx.createLinearGradient(0,0,window.innerWidth,0);
grd.addColorStop(0,"#1890FF");
grd.addColorStop(1,"#f7f7f7");
chart.area().position('time*tem')
.color(grd)
.shape('smooth');
chart.line().position('time*tem')
.color(grd)
.shape('smooth');
chart.render();
</script>
</body>
</html>