light-chart
Version:
Charts for mobile visualization.
55 lines (51 loc) • 1.44 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" style="position: relative;">
</canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const origin =[{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: 'Sales & Distribution', data: [11744, 17722, 16005,
19771, 20185, 24377, 32147, 39387] }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400,
34227] }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }];
const source = [];
origin.map(obj => {
const { name, data } = obj;
let year = 2010;
data.map((val, index)=> {
const item = {};
item.name = name;
item.value = val;
item.year = year + index;
source.push(item);
});
});
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: 260,
pixelRatio: window.devicePixelRatio // 指定分辨率
});
chart.source(source, {
value: {
tickCount: 5
}
});
chart.legend({
position: 'right',
selectedMode: 'single'
});
chart.line().position('year*value').color('name');
chart.render();
</script>
</body>
</html>