如何更改ant图表设计的colorField属性的颜色

Question

我在nextjs中有以下代码，

'use client';

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

const ColumnChart = ({ data }: any) => {
  const config = {
    data,
    xField: 'mounth',
    yField: 'total',
    colorField: 'mounth',
    color: ['#9a261d', '#b02b21', '#c53126'],
    style: {
      radiusTopLeft: 10,
      radiusTopRight: 10,
    },
  };
  return <Column {...config} />;
};

export default ColumnChart;

我正在尝试更改列的颜色，如果在 colorField 而不是月份中放置一些颜色，它会更改为该颜色，但是如果我保持原样，蚂蚁本身会使用它具有的一些默认颜色，我该如何做更改或替换这些默认颜色。

我附上图片

Answer 1

我最近遇到了同样的问题并找到了解决方案。不要使用颜色：，请尝试以下方法：

scale: { 
  color: { 
    range: ['#9a261d', '#b02b21', '#c53126'] 
  } 
},

这应该按预期应用正确的颜色范围。