light-chart
Version:
Charts for mobile visualization.
51 lines (47 loc) • 2.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双轴 Guide</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>
let data = [
{year: '2013',manage: 100,netAmount: 200,name: "经营活动产生现金流"},
{year: '2014',manage: 110,netAmount: 150,name: "经营活动产生现金流"},
{year: '2015',manage: 115,netAmount: 123,name: "经营活动产生现金流"},
{year: '2016',manage: 230,netAmount: 250,name: "经营活动产生现金流"},
{year: '2017',manage: 180,netAmount: 280,name: "经营活动产生现金流"},
{year: '2018',manage: 160,netAmount: 230,name: "经营活动产生现金流"},
{year: '2013',manage: 200,netAmount: 200,name: "投资活动产生现金流"},
{year: '2014',manage: 140,netAmount: 150,name: "投资活动产生现金流"},
{year: '2015',manage: 150,netAmount: 123,name: "投资活动产生现金流"},
{year: '2016',manage: 230,netAmount: 250,name: "投资活动产生现金流"},
{year: '2017',manage: 196,netAmount: 280,name: "投资活动产生现金流"},
{year: '2018',manage: 150,netAmount: 230,name: "投资活动产生现金流"},
{year: '2013',manage: 200,netAmount: 200,name: "筹资活动产生现金流"},
{year: '2014',manage: 370,netAmount: 150,name: "筹资活动产生现金流"},
{year: '2015',manage: 400,netAmount: 123,name: "筹资活动产生现金流"},
{year: '2016',manage: -450,netAmount: 250,name: "筹资活动产生现金流"},
{year: '2017',manage: 260,netAmount: 280,name: "筹资活动产生现金流"},
{year: '2018',manage: 140,netAmount: 230,name: "筹资活动产生现金流"}]
;
const chart = new F2.Chart({
id: 'mountNode',
syncY: true,
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.axis('netAmount', false); // 隐藏
chart.interval().position('year*manage').color('name').adjust('stack');
chart.line().position('year*netAmount');
chart.render();
</script>
</body>
</html>