light-chart
Version:
Charts for mobile visualization.
69 lines (68 loc) • 1.39 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 = [
{ country: '中国', cost: 96 },
{ country: '德国', cost: 121 },
{ country: '美国', cost: 100 },
{ country: '日本', cost: 111 },
{ country: '韩国', cost: 102 },
{ country: '法国', cost: 124 },
{ country: '意大利', cost: 123 },
{ country: '荷兰', cost: 111 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
'cost': {
min: 0
}
});
chart.coord('polar');
chart.legend({
position: 'right'
});
chart.tooltip({
offsetY: -20
});
chart.axis('cost', {
label: {
top: true
},
grid(text, index) {
if (text === '140') {
return {
lineDash: null
};
}
},
line: {
top: false
}
});
chart.interval()
.position('country*cost')
.color('country')
.style({
lineWidth: 1,
stroke: '#fff'
});
chart.render();
</script>
</body>
</html>