light-chart
Version:
Charts for mobile visualization.
119 lines (110 loc) • 2.73 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" style="position: relative;">
</canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
{ reportDate: "00:00", value: 393 },
{ reportDate: "01:00", value: 190 },
{ reportDate: "02:00", value: 244 },
{ reportDate: "03:00", value: 90 },
{ reportDate: "04:00", value: 97 },
{ reportDate: "05:00", value: 79 },
{ reportDate: "06:00", value: 401 },
{ reportDate: "07:00", value: 799 },
{ reportDate: "08:00", value: 683 },
{ reportDate: "09:00", value: 608 },
{ reportDate: "10:00", value: 1004 },
{ reportDate: "11:00", value: 1061 },
{ reportDate: "12:00", value: 1299 },
{ reportDate: "13:00", value: 911 },
{ reportDate: "14:00", value: 608 },
{ reportDate: "15:00", value: 708 },
{ reportDate: "16:00", value: 632 },
{ reportDate: "17:00", value: 1017 },
{ reportDate: "18:00", value: 1059 },
{ reportDate: "19:00", value: 1091 },
{ reportDate: "20:00", value: 1125 },
{ reportDate: "21:00", value: 1140 },
{ reportDate: "22:00", value: 1040 },
{ reportDate: "23:00", value: 1091 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio // 指定分辨率
});
chart.source(data, {
reportDate: {
tickCount: 5
}
});
chart.axis('reportDate', {
label: function(text, index, total) {
if (index === 0) { // 第一个文本左对齐
return {
textAlign: 'start'
};
}
if (index === (total - 1)) { // 最后一个文本右对齐
return {
textAlign: 'end'
}
}
return {};
}
});
chart.line().position('reportDate*value');
chart.guide()
.regionFilter({
start: [ '10:00', 1000 ],
end: [ '13:00', 'max' ],
color: '#fff'
});
chart.guide().regionFilter({
start: [ '10:00', 1000 ],
end: [ '13:00', 'max' ],
color: '#FF4D4F',
style: {
lineDash: [ 2, 3 ]
}
});
chart.guide()
.regionFilter({
start: [ '17:00', 1000 ],
end: [ 'max', 'max' ],
color: '#FF4D4F'
});
chart.guide()
.line({
start: [ 'min', 1000 ],
end: [ 'max', 1000 ],
style: {
lineDash: [ 2, 1 ],
stroke: '#FF4D4F'
}
});
chart.guide().text({
position: [ 'min', 1000 ],
content: '预警线',
style: {
textAlign: 'start',
textBaseline: 'bottom',
fill: '#FF4D4F'
}
});
chart.render();
</script>
</body>
</html>