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

Question

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

这是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

Answer 1

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

工作片段：

     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],
     },