折线图📈圆滑曲线错误，存在部分折线
HeavenSky opened this issue · comments
- 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="https://github.com/antvis/F2/issues/favicon.svg" target="_blank" rel="nofollow" /> -->
<!-- <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>问题截图
| Environment | Info |
|---|---|
| f2 | 5.0.30 |
| System | mac |
| Browser | chrome: 116.0.5845.110 (正式版本) (arm64) |
v4和v5都有这个问题
不是折线，有圆滑处理的，只是这里圆滑的弧度比较小，在可视化中，我们为了保持图形的准确性，不会让弧线超过最大最小值，这个 case 里，最小的 2 个值相差比较小，所以才会看起来像折线