light-chart
Version:
Charts for mobile visualization.
73 lines (71 loc) • 1.55 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 = [
{ day: '周一', value: 300 },
{ day: '周二', value: 400 },
{ day: '周三', value: 350 },
{ day: '周四', value: 500 },
{ day: '周五', value: 490 },
{ day: '周六', value: 600 },
{ day: '周日', value: 900 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
value: {
tickCount: 5,
min: 0
},
day: {
range: [ 0, 1 ]
}
});
// chart.coord({
// transposed: true
// });
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
onShow(ev) {
const { items } = ev;
items[0].name = null;
items[0].value = '$ ' + items[0].value;
}
});
chart.axis('day', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.line().position('day*value');
chart.point().position('day*value').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
</script>
</body>
</html>