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

[v5] line transform groupX not works but it's ok in official example #4669

Closed
coader opened this issue Feb 20, 2023 · 11 comments · Fixed by #4693
Closed

[v5] line transform groupX not works but it's ok in official example #4669

coader opened this issue Feb 20, 2023 · 11 comments · Fixed by #4693
Assignees
Labels
Milestone

Comments

@coader
Copy link

coader commented Feb 20, 2023

image

now I use encode('series'...), is it the same effect?

@pearmini
Copy link
Member

Can you give me a more complete example?

Based on the information you provided, GroupX is for aggregating data rather than grouping data. And aggregating is different from grouping. If you want to group lines for the line chart, you should specify series or color channel by mark.encode(chanel, definition).

@coader
Copy link
Author

coader commented Feb 20, 2023

I think I have made a mistake, but how can I draw two lines in one chart?

@coader
Copy link
Author

coader commented Feb 20, 2023

use .line() again to draw another line, I'll try it

@pearmini
Copy link
Member

Here is an example.

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

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

chart
  .line()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/indices.json',
  })
  .encode('x', (d) => new Date(d.Date))
  .encode('y', 'Close')
  .encode('color', 'Symbol') //  Color channel will group data by Symbol field, then draw one line for each group.
  .scale('y', { type: 'log' })
  .axis('y', { title: '↑ Change in price (%)' })
  .label({
    text: 'Symbol',
    selector: 'last',
    style: {
      fontSize: 10,
    },
  });

chart.render();

@pearmini
Copy link
Member

pearmini commented Feb 20, 2023

use .line() again to draw another line, I'll try it

This works fine too, and it is useful if the two lines encode different data.

@pearmini
Copy link
Member

Maybe there should be a more simple example to draw multiple lines in one chart on the example page.

@coader
Copy link
Author

coader commented Feb 20, 2023

image

this is drawn by encode('color'...)
the series is shown, but the second line disappeared and show '02-16,02-17' in tooltips

@coader
Copy link
Author

coader commented Feb 20, 2023

image
it's my data

@pearmini
Copy link
Member

image it's my data

That's because there is only one datum for 02-17 in the "F" series, it can't draw a line with only one point. You can add more data with a date field equal to "02-17" for the "F" series.

@coader
Copy link
Author

coader commented Feb 20, 2023

but if missing data, the really x axis line can't be selected (02-19), so I have to fill those missing data by code?

image

by the way, how to force axis tick only show integer number, and base from 0?
image

@pearmini
Copy link
Member

No, you don't have to. Currently, G2 selects the closest datum point to the selected date. It looks like doesn't make sense in the situation you provided. I' will skip the missing point in the tooltip.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants