light-chart
Version:
Charts for mobile visualization.
122 lines (119 loc) • 4.11 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 src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script>
function formatterPercent(value) {
value = value || 0;
value = value * 100;
return parseInt(value) + '%';
}
const data = [
{ country: 'Asia', year: '1750', value: 502, percent: 0.6511024643320363 },
{ country: 'Africa', year: '1750', value: 106, percent: 0.13748378728923477 },
{ country: 'Europe', year: '1750', value: 163, percent: 0.21141374837872892 },
{ country: 'Asia', year: '1800', value: 635, percent: 0.671957671957672 },
{ country: 'Africa', year: '1800', value: 107, percent: 0.11322751322751323 },
{ country: 'Europe', year: '1800', value: 203, percent: 0.21481481481481482 },
{ country: 'Asia', year: '1850', value: 809, percent: 0.6764214046822743 },
{ country: 'Africa', year: '1850', value: 111, percent: 0.09280936454849498 },
{ country: 'Europe', year: '1850', value: 276, percent: 0.23076923076923078 },
{ country: 'Asia', year: '1900', value: 947, percent: 0.6364247311827957 },
{ country: 'Africa', year: '1900', value: 133, percent: 0.08938172043010753 },
{ country: 'Europe', year: '1900', value: 408, percent: 0.27419354838709675 },
{ country: 'Asia', year: '1950', value: 1402, percent: 0.6460829493087558 },
{ country: 'Africa', year: '1950', value: 221, percent: 0.10184331797235023 },
{ country: 'Europe', year: '1950', value: 547, percent: 0.252073732718894 },
{ country: 'Asia', year: '1999', value: 3634, percent: 0.7083820662768031 },
{ country: 'Africa', year: '1999', value: 767, percent: 0.14951267056530215 },
{ country: 'Europe', year: '1999', value: 729, percent: 0.14210526315789473 },
{ country: 'Asia', year: '2050', value: 5268, percent: 0.687548942834769 },
{ country: 'Africa', year: '2050', value: 1766, percent: 0.23048812320542938 },
{ country: 'Europe', year: '2050', value: 628, percent: 0.08196293395980161 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
year: {
range: [ 0, 1 ]
},
'percent': {
formatter(val) {
return formatterPercent(val);
},
alias: 'percent(%)'
}
});
chart.axis('year', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
showCrosshairs: true,
custom: true, // 自定义 tooltip 内容框
onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.map(item => {
map[item.name] = _.clone(item);
});
tooltipItems.map(item => {
const { name, value } = item;
if (map[name]) {
map[name].value = (value);
}
});
legend.setItems(Object.values(map));
},
onHide(tooltip) {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}
});
chart.legend({
marker(x, y, r, ctx) {
ctx.lineWidth = 2;
ctx.strokeStyle = ctx.fillStyle;
ctx.moveTo(x - r - 3, y);
ctx.lineTo(x + r + 3, y);
ctx.stroke();
ctx.arc(x, y, r - 1, 0, Math.PI * 2, false);
ctx.fill();
}
});
chart.area()
.position('year*percent')
.color('country')
.adjust('stack');
chart.line()
.position('year*percent')
.color('country')
.adjust('stack');
chart.render();
</script>
</body>
</html>