堆叠图设置颜色

[YY88Xu]

问题描述

堆叠图怎么设置不同 lable 的颜色呢？

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});
const data = [
    {
      "month": "2023年1月",
      "label": "R4",
      "value": 10,
      color: 'red',
    },
    {
      "month": "2023年1月",
      "label": "R5",
      "value": 30,
      color: 'yellow',
    },
    {
      "month": "2023年1月",
      "label": "R6",
      color: 'green',
      "value": 32
    },
    {
      "month": "2023年2月",
      "label": "R4",
      color: 'red',
      "value": 10
    },
    {
      "month": "2023年2月",
      "label": "R5",
      color: 'yellow',
      "value": 60
    },
    {
      "month": "2023年2月",
      "label": "R6",
      color: 'green',
      "value": 40
    },
  ]
chart
  .interval()
  .data(data)
  .transform({ type: 'stackY' })
  .transform({ type: 'sortX', by: 'y', reverse: true })
  .encode('x', 'month')
  .encode('y', 'value')
  .encode('color', 'color')

chart.render();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[hustcc]

chart
  .interval()
  .data(data)
  .transform({ type: 'stackY' })
  .transform({ type: 'sortX', by: 'y', reverse: true })
  .encode('x', 'month')
  .encode('y', 'value')
  .encode('series', 'color')
  .style('fill', (d) => d.color)  // 👈🏻

[YY88Xu]

chart
.interval()
.data(data)
.transform({ type: 'stackY' })
.transform({ type: 'sortX', by: 'y', reverse: true })
.encode('x', 'month')
.encode('y', 'value')
.style('fill', (d) => d.color)

[YY88Xu]

为什么 .encode('color', 'color') 不行呢

[hustcc]

color 通道只是把图形按照 color 字段分组，至于是什么颜色，要需要在 scale 中配置映射规则。