light-chart
Version:
Charts for mobile visualization.
77 lines (75 loc) • 1.64 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 = [
{ month: 'Jan.', value: 6.06 },
{ month: 'Feb.', value: 82.2 },
{ month: 'Mar.', value: -22.11 },
{ month: 'Apr.', value: 21.53 },
{ month: 'May.', value: -21.74 },
{ month: 'Jun.', value: 73.61 },
{ month: 'Jul.', value: 53.75 },
{ month: 'Aug.', value: 60.32 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
month: {
range: [ 0, 1 ]
},
value: {
nice: false,
min: -100,
max: 100,
tickCount: 5
}
});
chart.axis('month', {
line: null,
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.axis('value', {
grid(text, index) {
if (text === '0') {
return {
lineDash: null,
lineWidth: 1
};
}
}
});
chart.tooltip({
showCrosshairs: true
});
chart.area({
startOnZero: true // X 轴从 0 开始
}).position('month*value');
chart.line().position('month*value');
chart.render();
</script>
</body>
</html>