单页代码

<!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>

问题截图

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

v4和v5都有这个问题

HeavenSky commented 1 year ago

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

zengyue commented 1 year ago

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

antvis / F2

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

Reproduction link

Steps to reproduce

单页代码

问题截图