ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.95k stars 364 forks source link

🧐[问题] 柱状图联通区域对比,如何设置黑色边框的颜色? #1881

Closed tommyZZM closed 11 months ago

tommyZZM commented 1 year ago

🧐 问题描述 [详细地描述问题,让大家都能理解]

image

💻 示例代码 [如果有必要,展示代码,线上示例,或仓库]

🚑 其他信息 [如截图等其他信息可以贴在这里]

lxfu1 commented 11 months ago

升级一下?https://ant-design-charts-next.antgroup.com/examples/statistics/column/#connect-area

import { Column } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';

const DemoColumn = () => {
  const config = {
    data: {
      type: 'fetch',
      value: 'https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json',
    },
    xField: 'year',
    yField: 'value',
    stack: true,
    colorField: 'type',
    interaction: {
      elementHighlightByColor: {
        link: true,
      },
    },
    state: {
      active: { linkStroke: 'red',linkFill: 'rgba(0,0,0,0.25)', stroke: 'red', lineWidth: 1 },
      inactive: { opacity: 0.5 },
    },
  };
  return <Column {...config} />;
};

ReactDOM.render(<DemoColumn />, document.getElementById('container'));