light-chart
Version:
Charts for mobile visualization.
68 lines (65 loc) • 1.5 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>
var data = [
{ x: '分类一', y: 30 },
{ x: '分类二', y: 48 },
{ x: '分类三', y: 59 },
{ x: '分类四', y: 125 },
{ x: '分类五', y: 85 },
{ x: '分类六', y: 70 },
{ x: '分类七', y: 56 },
{ x: '分类八', y: 34 },
];
var chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth > window.innerHeight ? (window.innerHeight - 54) : window.innerWidth * 0.707,
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
y: {
tickCount: 5
}
});
chart.interval().position('x*y');
chart.guide()
.regionFilter({
start: [ 'min', 95 ],
end: [ 'max', 'max' ],
color: '#FF4D4F'
});
chart.guide().line({
start: [ 'min', 95 ],
end: [ 'max', 95 ],
style: {
stroke: '#FF4D4F',
lineDash: [ 2 ]
}
});
chart.guide().text({
position: [ 'max', 95 ],
content: '预警值： 95',
offsetY: -5,
style: {
fill: '#FF4D4F',
textAlign: 'end',
textBaseline: 'bottom'
}
});
chart.render();
</script>
</body>
</html>