如何在蚂蚁设计图表中的悬停柱上删除背景颜色？

发布于 2025-02-04 12:11:45 字数 1309 浏览 3 评论 0原文

我想删除蚂蚁图表的悬停列的背景。在这里找不到适当的属性 - https://charts.ants.ant.ant.ant.ant.ant.ant.ant.ant.and.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.and.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.ant.an时候/- en/示例/列/基本＃基本

这是我的组件：

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

const Chart = () => {
const data = [
        {
            "date": "6/21",
            "volume": 9900
        },
        {
            "date": "7/21",
            "volume": 12100
        },
        {
            "date": "8/21",
            "volume": 12100
        },
        {
            "date": "9/21",
            "volume": 14800
        },
        {
            "date": "10/21",
            "volume": 18100
        }
    ];
    const config = {
        data,

        autoFit: true,
        xField: 'date',
        yField: 'volume',
        columnStyle: {
            fill: '#DBE7FD',
        },
    };
    return (
            <Column {...config} />
    )
});

export { Chart }

我想删除悬停的背景，如下：

图表的示例图像

原文

I want to remove the background on hover columns of ant charts. Could not find the appropriate property here- https://charts.ant.design/en/examples/column/basic#basic

here is my component:

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

const Chart = () => {
const data = [
        {
            "date": "6/21",
            "volume": 9900
        },
        {
            "date": "7/21",
            "volume": 12100
        },
        {
            "date": "8/21",
            "volume": 12100
        },
        {
            "date": "9/21",
            "volume": 14800
        },
        {
            "date": "10/21",
            "volume": 18100
        }
    ];
    const config = {
        data,

        autoFit: true,
        xField: 'date',
        yField: 'volume',
        columnStyle: {
            fill: '#DBE7FD',
        },
    };
    return (
            <Column {...config} />
    )
});

export { Chart }

I want to remove the background on hover like below:

sample image of the chart

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自此以后，行同陌路 2025-02-11 12:11:45

您可以通过设置图表的交互来实现

interactions: [
      {
        type: 'active-region',
        enable: false,
      },
],

这一

import { Column } from "@ant-design/plots"

const Chart = () => {
  const data = [
    {
      date: "6/21",
      volume: 9900,
    },
    {
      date: "7/21",
      volume: 12100,
    },
    {
      date: "8/21",
      volume: 12100,
    },
    {
      date: "9/21",
      volume: 14800,
    },
    {
      date: "10/21",
      volume: 18100,
    },
  ]
  const config = {
    data,

    autoFit: true,
    xField: "date",
    yField: "volume",
    columnStyle: {
      fill: "#DBE7FD",
    },
    interactions: [
      {
        type: "active-region",
        enable: false,
      },
    ],
  }
  return <Column {...config} />
}

export { Chart }

目标

： //codesandbox.io/s/dark-dew-6olxvi?fontsize=14&； hidenAvigation=1&theme=dark“ rel =“ nofollow noreferrer”> ”编辑dark-dew-dew-6olxvi“

You could achieve that by setting interactions of your chart like so:

interactions: [
      {
        type: 'active-region',
        enable: false,
      },
],

So your component will be:

import { Column } from "@ant-design/plots"

const Chart = () => {
  const data = [
    {
      date: "6/21",
      volume: 9900,
    },
    {
      date: "7/21",
      volume: 12100,
    },
    {
      date: "8/21",
      volume: 12100,
    },
    {
      date: "9/21",
      volume: 14800,
    },
    {
      date: "10/21",
      volume: 18100,
    },
  ]
  const config = {
    data,

    autoFit: true,
    xField: "date",
    yField: "volume",
    columnStyle: {
      fill: "#DBE7FD",
    },
    interactions: [
      {
        type: "active-region",
        enable: false,
      },
    ],
  }
  return <Column {...config} />
}

export { Chart }

Working sample: