Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

折线图📈圆滑曲线错误，存在部分折线 #1835

Closed
1 task
HeavenSky opened this issue Sep 4, 2023 · 2 comments
Closed
1 task

折线图📈圆滑曲线错误，存在部分折线 #1835

HeavenSky opened this issue Sep 4, 2023 · 2 comments

Comments

@HeavenSky
Copy link

HeavenSky commented Sep 4, 2023 •
edited

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

可直接见单页复现代码

Steps to reproduce

单页代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="cache-control" content="no-siteapp" />
	<meta http-equiv="cache-control" content="no-transform" />
	<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no,adress=no,email=no" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover" />
	<!-- <link rel="shortcut icon" href="favicon.svg" /> -->
	<!-- <link rel="stylesheet/less" type="text/css" href="less/demo.less" /> -->
	<!-- <script src="https://unpkg.com/less/dist/less.min.js"></script> -->

	<title>React App</title>

	<!-- https://babeljs.io/docs/babel-standalone/ -->
	<!-- <script src="https://unpkg.com/@babel/polyfill/dist/polyfill.min.js"></script> -->
	<!-- <script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script> -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<!-- <script src="https://unpkg.com/babel-standalone/babel.min.js"></script> -->

	<!-- <script src="https://unpkg.com/react@0/dist/react.min.js"></script> -->
	<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<!-- <script src="https://unpkg.com/react-dom@0/dist/react-dom.min.js"></script> -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
	<canvas id="myChart" width="400" height="260"></canvas>
	<script src="https://unpkg.com/@antv/f2@5/dist/index.min.js"></script>
	<script type="text/babel">
		/** @jsx h */

		const { jsx, Canvas, Chart, Axis, Line, Area, Tooltip } = F2
		/** 封装优化f2.jsx用法 */
		const h = (tag, ...rest) => {
			if (tag === Canvas) {
				const { props } = jsx(Canvas, ...rest)
				const canvas = new Canvas(props);
				canvas.render(); return canvas;
			}
			return jsx(tag, ...rest);
		}

		const data = [
			{ genre: 'Sports', sold: 275 },
			{ genre: 'Action', sold: 120 },
			{ genre: 'Strategy', sold: 115 },
			{ genre: 'Shooter', sold: 350 },
			{ genre: 'Other', sold: 150 },
		];

		const context = document.getElementById('myChart').getContext('2d');
		const canvas = (
			<Canvas context={context} pixelRatio={window.devicePixelRatio}>
				<Chart data={data}>
					<Axis field="genre" style={{
						line: {
							// visibility: 'hidden',
						},
						grid: {
							// visibility: 'hidden',
						},
					}} />
					<Axis field="sold" style={{
						line: {
							// visibility: 'hidden',
						},
						grid: {
							visibility: 'hidden',
						},
					}} />
					<Area x="genre" y="sold" shape="smooth" size={3} />
					<Line x="genre" y="sold" shape="smooth" size={3} />
					<Tooltip />
				</Chart>
			</Canvas>
		);
	</script>
</body>
</html>

问题截图

image

Environment Info
f2 5.0.30
System mac
Browser chrome: 116.0.5845.110 (正式版本) (arm64)

v4和v5都有这个问题
zengyue added a commit that referenced this issue Sep 4, 2023
@zengyue
fix: 修复 smooth 时，line 和 area 线条不一致。Closed: #1835
25c285f
@HeavenSky
Copy link
Author

@zengyue 修复 建议是将折线图的非圆滑曲线改成和面积图的圆滑边界一致吧，看了下提交的snap图，变成都有折线了

@zengyue
Copy link
Member

zengyue commented Sep 4, 2023

不是折线，有圆滑处理的，只是这里圆滑的弧度比较小，在可视化中，我们为了保持图形的准确性，不会让弧线超过最大最小值，这个 case 里，最小的 2 个值相差比较小，所以才会看起来像折线

zengyue added a commit that referenced this issue Sep 5, 2023
@zengyue
fix: 修复 smooth 时，line 和 area 线条不一致。Closed: #1835 (#1836)
2b39b0c
@zengyue zengyue closed this as completed Sep 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zengyue @HeavenSky