[v5] line transform groupX not works but it's ok in official example #4669
coader posted onGitHub
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)
.
I think I have made a mistake, but how can I draw two lines in one chart?
use .line() again to draw another line, I'll try it
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();
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.
Maybe there should be a more simple example to draw multiple lines in one chart on the example page.
this is drawn by encode('color'...) the series is shown, but the second line disappeared and show '02-16,02-17' in tooltips
it's my data
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.
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?
by the way, how to force axis tick only show integer number, and base from 0?
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.