Antd charts 長條圖、圓餅圖顏色設置

Antd charts 長條圖、圓餅圖顏色設置

“@ant-design/charts”: “^2.1.2”,
“@ant-design/plots”: “^2.2.8”,

圓餅圖

image

scale.color.range 設置

import { Pie } from '@ant-design/plots'

const Component = () => {
  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    scale: { 
      color: {
        // 修改顏色
        range: ['#f8d684', '#f6c1e0', '#8ecbe5', '#8c86ca'],
      },
    },
  }
  
  // ...
  
  return <Pie {...config} />
}

長條圖

image 1

theme.category10 設置

import { Bar } from '@ant-design/plots'

const Component = () => {
  const config = {
    data,
    xField: 'name',
    yField: 'value',
    colorField: 'type',
    stack: true,
    // 修改顏色
    theme: { category10: ['#8d86cf', '#7bcde9'] },
  }
  return <Bar {...config} />
}
guest

0 評論
最舊
最新 最多投票
內聯回饋
查看全部評論