light-chart
Version:
Charts for mobile visualization.
61 lines (60 loc) • 1.89 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: '10:10', call: 4, waiting: 2, people: 2 },
{ time: '10:15', call: 2, waiting: 6, people: 3 },
{ time: '10:20', call: 13, waiting: 2, people: 5 },
{ time: '10:25', call: 9, waiting: 9, people: 1 },
{ time: '10:30', call: 5, waiting: 2, people: 3 },
{ time: '10:35', call: 8, waiting: 2, people: 1 },
{ time: '10:40', call: 13, waiting: 1, people: 2 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
call: {
min: 0
},
people: {
min: 0
},
waiting: {
min: 0
}
});
chart.legend({
custom: true,
position: 'bottom',
items: [
{ value: 'waiting', marker: {symbol: 'square', fill: '#3182bd', radius: 5} },
{ value: 'call', marker: {symbol: 'circle', stroke: '#99d8c9', radius: 5, lineWidth: 3} },
{ value: 'people', marker: {symbol: 'circle', stroke: '#fdae6b', radius: 5, lineWidth: 3} }
]
});
chart.axis('waiting', false);
chart.axis('call', false);
chart.axis('people', false);
chart.interval().position('time*waiting').color('#1890FF');
chart.line().position('time*call').color('#223273').size(3).shape('smooth');
chart.line().position('time*people').color('#FACC14').size(3).shape('smooth');
chart.point().position('time*people').color('#FACC14').size(3);
chart.render();
</script>
</body>
</html>