light-chart
Version:
Charts for mobile visualization.
110 lines (108 loc) • 2.91 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="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const { Util, Global } = F2;
const data = [
{ item: 'Design', user: '用户 A', score: 70 },
{ item: 'Design', user: '用户 B', score: 30 },
{ item: 'Development', user: '用户 A', score: 60 },
{ item: 'Development', user: '用户 B', score: 70 },
{ item: 'Marketing', user: '用户 A', score: 50 },
{ item: 'Marketing', user: '用户 B', score: 60 },
{ item: 'Users', user: '用户 A', score: 40 },
{ item: 'Users', user: '用户 B', score: 50 },
{ item: 'Test', user: '用户 A', score: 60 },
{ item: 'Test', user: '用户 B', score: 70 },
{ item: 'Language', user: '用户 A', score: 70 },
{ item: 'Language', user: '用户 B', score: 50 },
{ item: 'Technology', user: '用户 A', score: 70 },
{ item: 'Technology', user: '用户 B', score: 40 },
{ item: 'Support', user: '用户 A', score: 60 },
{ item: 'Support', user: '用户 B', score: 40 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.75,
pixelRatio: window.devicePixelRatio
});
chart.coord('polar');
chart.source(data, {
score: {
min: 0,
max: 120,
nice: false,
tickCount: 4
}
});
chart.tooltip({
custom: true,
onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.map(item => {
map[item.name] = _.clone(item);
});
tooltipItems.map(item => {
const { name, value } = item;
if (map[name]) {
map[name].value = value;
}
});
legend.setItems(Object.values(map));
},
onHide(tooltip) {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}
});
chart.axis('score', {
label(text, index, total) {
if (index === total - 1) {
return null;
}
return {
top: true
};
},
grid: {
type: 'arc'
}
});
chart.axis('item', {
line: {
lineWidth: 1,
stroke: '#e8e8e8'
}
});
chart.line().position('item*score').color('user').animate({
appear: {
animation: 'groupWaveIn'
}
});
chart.point().position('item*score').color('user').style({
stroke: '#fff',
lineWidth: 1
}).animate({
appear: {
delay: 300
}
});
chart.render();
</script>
</body>
</html>