light-chart
Version:
Charts for mobile visualization.
97 lines (93 loc) • 3.54 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多条折线(HighCharts)</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 src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script>
const data = [
{ name: 'Installation', value: 43934, year: '2010' },
{ name: 'Installation', value: 52503, year: '2011' },
{ name: 'Installation', value: 57177, year: '2012' },
{ name: 'Installation', value: 69658, year: '2013' },
{ name: 'Installation', value: 97031, year: '2014' },
{ name: 'Installation', value: 119931, year: '2015' },
{ name: 'Installation', value: 137133, year: '2016' },
{ name: 'Installation', value: 154175, year: '2017' },
{ name: 'Manufacturing', value: 24916, year: '2010' },
{ name: 'Manufacturing', value: 24064, year: '2011' },
{ name: 'Manufacturing', value: 29742, year: '2012' },
{ name: 'Manufacturing', value: 29851, year: '2013' },
{ name: 'Manufacturing', value: 32490, year: '2014' },
{ name: 'Manufacturing', value: 30282, year: '2015' },
{ name: 'Manufacturing', value: 38121, year: '2016' },
{ name: 'Manufacturing', value: 40434, year: '2017' },
{ name: 'Sales & Distribution', value: 11744, year: '2010' },
{ name: 'Sales & Distribution', value: 17722, year: '2011' },
{ name: 'Sales & Distribution', value: 16005, year: '2012' },
{ name: 'Sales & Distribution', value: 19771, year: '2013' },
{ name: 'Sales & Distribution', value: 20185, year: '2014' },
{ name: 'Sales & Distribution', value: 24377, year: '2015' },
{ name: 'Sales & Distribution', value: 32147, year: '2016' },
{ name: 'Sales & Distribution', value: 39387, year: '2017' },
{ name: 'Project Development', value: 10300, year: '2010' },
{ name: 'Project Development', value: 24377, year: '2011' },
{ name: 'Project Development', value: 7988, year: '2012' },
{ name: 'Project Development', value: 12169, year: '2013' },
{ name: 'Project Development', value: 15112, year: '2014' },
{ name: 'Project Development', value: 22452, year: '2015' },
{ name: 'Project Development', value: 34400, year: '2016' },
{ name: 'Project Development', value: 34227, year: '2017' },
{ name: 'Other', value: 12908, year: '2010' },
{ name: 'Other', value: 5948, year: '2011' },
{ name: 'Other', value: 8105, year: '2012' },
{ name: 'Other', value: 11248, year: '2013' },
{ name: 'Other', value: 8989, year: '2014' },
{ name: 'Other', value: 11816, year: '2015' },
{ name: 'Other', value: 18274, year: '2016' },
{ name: 'Other', value: 18111, year: '2017' }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.8,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
value: {
tickCount: 5,
min: 0
},
year: {
range: [ 0, 1 ]
}
});
chart.legend({
position: 'bottom'
});
chart.tooltip(false);
chart.axis('year', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.line().position('year*value').color('name');
chart.render();
</script>
</body>
</html>