light-chart
Version:
Charts for mobile visualization.
102 lines (98 loc) • 2.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>F2 与 iconfont</title>
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/fonts/iconfont.css">
<style>
canvas#mountNode {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
<button id="changeData">更新数据</button>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ amount: 2, ratio: 0.01, memo: '学习', namekey: 'namekey' },
{ amount: 2, ratio: 0.01, memo: '睡觉', namekey: 'namekey' },
{ amount: 2, ratio: 0.01, memo: '吃饭', namekey: 'namekey' },
{ amount: 2, ratio: 0.01, memo: '讲礼貌', namekey: 'namekey' },
{ amount: 2, ratio: 0.01, memo: '其他', namekey: 'namekey' },
{ amount: 2, ratio: 0.01, memo: '运动', namekey: 'namekey' },
{ amount: 188, ratio: 0.94, memo: '暂无备注', namekey: 'namekey' }
];
const chart = new F2.Chart({
id: 'mountNode',
width: 375,
height: 260,
animate: false,
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.coord('polar', {
transposed: true,
innerRadius: 0.4,
radius: 0.8
});
chart.axis(false);
chart.legend(false);
chart.tooltip(false);
chart.pieLabel({
triggerOn: 'click',
onClick(ev) {
console.log(ev.data);
},
lineHeight: 32,
// skipOverlapLabels: true,
sidePadding: 30,
adjustOffset: 20,
label1(data, color) {
return {
text: data.memo,
textBaseline: 'bottom',
fill: color
};
},
label2(data) {
return {
text: data.amount,
fill: '#999',
fontWeight: 'bold'
};
}
});
chart.interval().position('namekey*ratio')
.color('memo', [
'#1890FF',
'#13C2C2',
'#2FC25B',
'#FACC14',
'#F04864',
'#8543E0',
'#3436C7',
'#223273'])
.adjust('stack');
chart.render();
// ================= 改变数据 ========================
function randomData(data) {
data.map(obj => {
obj.ratio = Math.random();
return obj;
});
return data;
}
$('#changeData').on('click', () => {
const newData = randomData(data);
chart.changeData(newData);
});
</script>
</body>
</html>