如何移除@ant-design/plots柱状图的X轴基线

问题描述 #

我在移除@ant-design/plots柱状图的X轴基线时遇到困难，现有配置未生效，效果如下：

我的代码实现：

import { Column } from '@ant-design/plots';

const config = {
        data: [...dataArr, ...data],
        isStack: true,
        xField: 'year',
        yField: 'value',
        seriesField: 'type',
        colorField: 'type', // or seriesField in some cases
        color: ['#d62728', '#2ca02c', '#000000'],

        yAxis: {
            grid: {
                line: null
            }
        },

        xAxis: {
            grid: {
                closed: false,
                alignTick: false,
                line: null
            }
        },

        label: {
            position: 'middle' // 'top', 'bottom', 'middle'
        },
        interactions: [
            {
                type: 'active-region',
                enable: false
            }
        ],
        connectedArea: {
            style: (oldStyle) => {
                return {
                    fill: 'rgba(0,0,0,0.2)',
                    stroke: oldStyle.fill,
                    lineWidth: 1
                };
            }
        }
    };

    return <Column style={{ background: 'rgb(27, 27, 27)', padding: '20px 0 20px 20px' }} {...config} />;
};

我已查阅@ant-design/plots柱状图官方文档，但仍未找到解决方法。

解决方法 #

你当前配置的xAxis.grid.line是控制网格线的，而X轴的基线属于轴线（axisLine），需要单独配置该属性来隐藏：

方式一：直接移除轴线 #

修改xAxis配置，添加axisLine: null：

xAxis: {
    grid: {
        closed: false,
        alignTick: false,
        line: null
    },
    axisLine: null
}

方式二：通过样式隐藏轴线 #

如果需要更灵活的样式控制，可以设置轴线描边为无：

xAxis: {
    grid: {
        closed: false,
        alignTick: false,
        line: null
    },
    axisLine: {
        style: {
            stroke: 'none'
        }
    }
}

两种方式都能实现移除X轴基线的效果，按需选择即可。

内容的提问来源于stack exchange，提问作者Fahad Ali