antvis / G2Plot

:dango: An interactive and responsive charting library based on G2.
https://g2plot.antv.antgroup.com
MIT License
2.56k stars 607 forks source link

🤔 [QUESTION] colorField in Column #3118

Closed iliasov-artem closed 2 years ago

iliasov-artem commented 2 years ago

🐛 Question description

I`m trying to use:

{ colorField: 'type', color: ({ type }) => { if(type === 'male'){ return 'red'; } return 'yellow'; } }

but it doesn`t work, "type" is undefined Is it bug or mistake in documentation?

mehdi-dalil commented 2 years ago

can you send your entire config object and a sample of your data ?

visiky commented 2 years ago

maybe you should use seriesField

image
iliasov-artem commented 2 years ago

can you send your entire config object and a sample of your data ?

const data = [
  {
    type: '家具家电',
    sales: 38,
    color: 'red'
  },
  {
    type: '粮油副食',
    sales: 52,
    color: 'black'

  },
  {
    type: '生鲜水果',
    sales: 61,
    color: 'red'

  },
  {
    type: '美容洗护',
    sales: 145,
    color: 'red'

  },
  {
    type: '母婴用品',
    sales: 48,
    color: 'yellow'

  },
  {
    type: '进口食品',
    sales: 38,
    color: 'red'

  },
  {
    type: '食品饮料',
    sales: 38,
    color: 'red'

  },
  {
    type: '家庭清洁',
    sales: 38,
    color: 'red'

  },
];

const columnPlot = new Column('container', {
  data,
  xField: 'type',
  yField: 'sales',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  colorField: 'color', // or seriesField in some cases
  color: ({ color }) => {
    return color;
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  },
});

columnPlot.render();
iliasov-artem commented 2 years ago

maybe you should use seriesField

image

I can`t, because I need them both

visiky commented 2 years ago

can you send your entire config object and a sample of your data ?

const data = [
  {
    type: '家具家电',
    sales: 38,
    color: 'red'
  },
  {
    type: '粮油副食',
    sales: 52,
    color: 'black'

  },
  {
    type: '生鲜水果',
    sales: 61,
    color: 'red'

  },
  {
    type: '美容洗护',
    sales: 145,
    color: 'red'

  },
  {
    type: '母婴用品',
    sales: 48,
    color: 'yellow'

  },
  {
    type: '进口食品',
    sales: 38,
    color: 'red'

  },
  {
    type: '食品饮料',
    sales: 38,
    color: 'red'

  },
  {
    type: '家庭清洁',
    sales: 38,
    color: 'red'

  },
];

const columnPlot = new Column('container', {
  data,
  xField: 'type',
  yField: 'sales',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  colorField: 'color', // or seriesField in some cases
  color: ({ color }) => {
    return color;
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  },
});

columnPlot.render();

use seriesField instead of colorField, colorField isn't supported here

mehdi-dalil commented 2 years ago

colorField isn't supported anymore, and if you cannot use seriesField, use color like this:

color: data.map(({ color }) => color),