Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

color 通道使用回调自定义颜色的时候,折线图显示有问题 #5009

Closed
hustcc opened this issue May 12, 2023 · 1 comment
Closed
Assignees

Comments

@hustcc
Copy link
Member

hustcc commented May 12, 2023

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

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
  paddingLeft: 50,
});

chart
  .line()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/indices.json',
  })
  .transform({ type: 'normalizeY', basis: 'first', groupBy: 'color' })
  .encode('x', (d) => new Date(d.Date))
  .encode('y', 'Close')
  .encode('color', (d) => d.Symbol === 'AAPL' ? 'red' : 'blue')  // 👈🏻
  .scale('color', { type: 'identity' })
  .scale('y', { type: 'log' })
  .axis('y', { title: '↑ Change in price (%)' })
  .label({
    text: 'Symbol',
    selector: 'last',
    style: {
      fontSize: 10,
    },
  })
  .tooltip({ channel: 'y', valueFormatter: '.1f' });

chart.render();

image

@hustcc hustcc self-assigned this May 12, 2023
@hustcc
Copy link
Member Author

hustcc commented May 12, 2023

增加配置:

{
  series: 'Symbol',
}

@hustcc hustcc closed this as completed May 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant