🐛[BUG]急急急，在next项目中使用分组柱线图表，折线被遮盖，柱子的分组没实现，legend没展示

maoyuehui commented 3 months ago

注意：我的配置项config，包括数据都是原封不动的粘贴过来的 https://ant-design-charts.antgroup.com/zh/examples/statistics/dual-axes/#grouped-column-line 使用分组柱线图表，出现，折线被遮盖，分组没实现，图表的legend也没有展示开始我在next项目中使用这个分组柱线图表，以为是我老项目配置问题

结果我新拉的一个next项目。粘贴文档的这个示例发现还是一样的问题但是在umi搭建的项目正常显示

lxfu1 commented 3 months ago

能给个最小复现吗？

maoyuehui commented 3 months ago

就是你新建一个next.js的项目，然后把官网的这个柱线混合的demo直接烤过去就行，就复现了，没用任何改动代码

yugzan commented 2 months ago

我也有遇到類似問題，使用 Next.js 不管那一個圖表 title 跟 description 都沒有正常顯示

`'use client'; import React from 'react'; import { Collapse, Card, List, Row, Col, Layout, theme, Menu, Typography } from 'antd'; import { Line } from '@ant-design/charts';

const Page: React.FC = () => {

const Demo: React.FC = () => {
    const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
    ];
    const config = {
        data,
        title: {
            visible: true,
            text: '带数据点的折线图',
        },
        description: {
            visible: false,
            text: '123',
          },
        xField: 'year',
        yField: 'value',
        point: {
            visible: true,
            size: 5,
            shape: 'diamond',
            style: {
                fill: 'white',
                stroke: '#2593fc',
                lineWidth: 2,
            },
        },
    };
    return (
        <Line {...config} />
    );

}
return (
    <>
        <Row>
            <Col span={4}></Col>
            <Col span={20}>
                <Demo></Demo>
            </Col>
        </Row>
    </>
)

}; export default Page;`

ant-design / ant-design-charts

🐛[BUG]急急急，在next项目中使用分组柱线图表，折线被遮盖，柱子的分组没实现，legend没展示 #2624