light-chart
Version:
Charts for mobile visualization.
171 lines (162 loc) • 3.73 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timeCat 类型平移</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
<p>手机上体验效果更佳</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
function formatNumber(n) {
return String(Math.floor(n * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
$.getJSON('./data/steps.json', function(data) {
const originDates = [];
const originSteps = [];
const firstDayArr = [];
data.forEach(obj => {
if (obj.date >= '2018-05-01') {
originDates.push(obj.date);
originSteps.push(obj.steps);
}
if (obj.first) {
firstDayArr.push(obj);
}
});
const chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
date: {
type: 'timeCat',
tickCount: 5,
values: originDates,
mask: 'MM-DD'
},
steps: {
tickInterval: 5000,
min: Math.min.apply(null, originSteps),
max: Math.max.apply(null, originSteps)
}
});
chart.axis('date', {
tickLine: {
length: 4,
stroke: '#cacaca'
},
label: {
fill: '#cacaca'
},
line: {
top: true
}
});
chart.axis('steps', {
position: 'right',
label(text) {
return {
text: formatNumber(text * 1),
fill: '#cacaca'
};
},
grid: {
stroke: '#d1d1d1'
}
});
chart.tooltip({
showItemMarker: false,
background: {
radius: 2,
fill: '#FF5842',
padding: [3, 5]
},
onShow(ev) {
const items = ev.items;
items[0].name = '';
items[0].value = items[0].value + ' 步';
}
});
chart.interval().position('date*steps').color('#FF5842').style({
radius: [ 2, 2, 0, 0 ]
})
.animate({
update: {
duration: 1000
}
});
firstDayArr.forEach(obj => {
chart.guide().line({
top: false,
start: [ obj.date, 'min' ],
end: [ obj.date, 'max' ],
style: {
lineWidth: 1,
stroke: '#A4A4A4'
},
limitInPlot: true
});
chart.guide().text({
position: [ obj.date, 'min' ],
content: moment(obj.date).format('YYYY-MM'),
style: {
textAlign: 'start',
fill: '#cacaca',
textBaseline: 'top'
},
offsetY: 20,
limitInPlot: true
});
});
chart.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
});
chart.interaction('swipe');
chart.interaction('pan', {
mode: 'x',
// onProcess(e) {
// const center = e.center;
// const position = F2.Util.getRelativePosition(center, chart.get('canvas'));
// chart.showTooltip(position);
// },
onEnd: () => {
const xScale = chart.getXScale();
// timeCat 类型
const source = chart.get('data');
const yValues = [];
source.map(obj => {
const xValue = obj.date;
if (xScale.translate(xValue) >= 0) {
yValues.push(obj.steps);
}
});
if (yValues.length) {
const yMin = Math.min.apply(null, yValues);
const yMax = Math.max.apply(null, yValues);
chart.scale('steps', {
min: yMin,
max: yMax,
tickInterval: 5000
});
chart.repaint();
}
}
});
chart.render();
});
</script>
</body>
</html>