light-chart
Version:
Charts for mobile visualization.
82 lines (80 loc) • 1.87 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 data = [
{ tem: 500, month: '3月' },
{ tem: -150, month: '4月' },
{ tem: 450, month: '5月' },
{ tem: -140, month: '6月' },
{ tem: 690, month: '7月' },
{ tem: 346, month: '8月' }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
tem: {
tickCount: 5
}
});
// chart.axis('month', {
// label: {
// font: 'sans-serif '
// },
// line: null,
// grid: null
// });
// chart.axis('tem', {
// label: null,
// grid: {
// stroke: '#f8f8f8'
// }
// });
chart.interval().position('month*tem').color('tem*month', function(tem, month) {
if (month === '8月') {
return '#f5623a';
}
if (tem >= 0) {
return '#f8bdad';
}
if (tem < 0) {
return '#99d6c0';
}
});
// 辅助元素
data.forEach(function(obj, index) {
// 文字部分
const offsetY = obj.tem > 0 ? -16 : 14;
chart.guide().html({
position: [ obj.month, obj.tem ],
html: `<div style='color: #999999;'><span>${obj.tem}</span></div>`,
offsetX: 0,
offsetY
});
// 背景部分
const offset = 0.25;
chart.guide().rect({
start: [ index - offset, 'max' ],
end: [ index + offset, 'min' ],
style: { fill: '#f8f8f8' }
});
});
chart.render();
</script>
</body>
</html>