light-chart
Version:
Charts for mobile visualization.
97 lines (94 loc) • 2.98 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠条形图 hover 方式 2</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 = [
{ State: 'WY', 年龄段 : '小于5岁', 人口数量: 25635 },
{ State: 'WY', 年龄段 : '5至13岁', 人口数量: 1890 },
{ State: 'WY', 年龄段 : '14至17岁', 人口数量: 9314 },
{ State: 'DC', 年龄段 : '小于5岁', 人口数量: 30352 },
{ State: 'DC', 年龄段 : '5至13岁', 人口数量: 20439 },
{ State: 'DC', 年龄段 : '14至17岁', 人口数量: 10225 },
{ State: 'VT', 年龄段 : '小于5岁', 人口数量: 38253 },
{ State: 'VT', 年龄段 : '5至13岁', 人口数量: 42538 },
{ State: 'VT', 年龄段 : '14至17岁', 人口数量: 15757 },
{ State: 'ND', 年龄段 : '小于5岁', 人口数量: 51896 },
{ State: 'ND', 年龄段 : '5至13岁', 人口数量: 67358 },
{ State: 'ND', 年龄段 : '14至17岁', 人口数量: 18794 },
{ State: 'AK', 年龄段 : '小于5岁', 人口数量: 72083 },
{ State: 'AK', 年龄段 : '5至13岁', 人口数量: 85640 },
{ State: 'AK', 年龄段 : '14至17岁', 人口数量: 22153 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
'人口数量': {
tickCount: 5
}
});
chart.coord({
transposed: true
});
chart.axis('State', {
line: F2.Global._defaultAxis.line,
grid: null
});
chart.axis('人口数量', {
line: null,
grid: F2.Global._defaultAxis.grid,
label(text, index, total) {
const textCfg = {
text: text / 1000 + ' k'
};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
custom: true,
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.interval().position('State*人口数量').color('年龄段').adjust('stack');
chart.render();
</script>
</body>
</html>