antd图表库中如何自定义列颜色和形状？

【问题标题】：How to customize column colors and shapes in antd chart library?antd图表库中如何自定义列颜色和形状？
【发布时间】：2021-07-03 01:35:47
【问题描述】：

我正在使用 antd 图表库中给出的柱形图。我了解自定义的工作原理以及如何更改提供填充道具的列的颜色。但是，如果我有两列像本例一样组合在一起，如何为两者指定不同的颜色？我还想给列一些边界半径，我也可以这样做吗？

这里是 antd 参考 https://charts.ant.design/zh-CN/demos/column/#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6%E5%9B%BE

还有沙盒 https://codesandbox.io/s/5fshy

TIA

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您可以使用 color 和 colorField 选项来设置 API 文档中定义的自定义颜色 https://charts.ant.design/demos/column/?type=api#color

工作sn-p：

     var config = {
       data: props.data,
       xField: 'x',
       yField: 'y',
       seriesField: 'type',
       isPercent: true,
       isStack: true,
       meta: {
          value: {
          min: 0,
          max: 100,
         },
       },
       label: {
       position: 'middle',
       content: function content(item) {
          return ''.concat(item.y.toFixed(2), '%');
       },
       style: { fill: '#000' },
       },
       colorField: 'type', // or seriesField in some cases
       color:['#19CDD7','#DDB27C'],
      };
     return <Column {...config} />;
    }

对于半径，使用 columnStyle 参数：

     columnStyle: {
       radius: [20, 20, 0, 0],
     },

【讨论】：