antvis/G2

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

coader posted onGitHub

image

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


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).

posted by pearmini about 2 years ago

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

posted by coader about 2 years ago

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

posted by coader about 2 years ago

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();
posted by pearmini about 2 years ago

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.

posted by pearmini about 2 years ago

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

posted by pearmini about 2 years ago

image

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

posted by coader about 2 years ago

image it's my data

posted by coader about 2 years ago

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.

posted by pearmini about 2 years ago

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

posted by coader about 2 years ago

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.

posted by pearmini about 2 years ago

Fund this Issue

$0.00
Funded

Pull requests