antvis / antvis/G2

mark.label 可以通过 channel 设置值

Open
#4,781 0 comments 0 reactions 0 assignees View on GitHub
v5
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

![image](https://user-images.githubusercontent.com/49330279/225855083-d0c1b432-99b0-45af-b69a-3df41c7f41aa.png)

```js
/**
* A recreation of this demo: https://vega.github.io/vega-lite/examples/layer_precipitation_mean.html
*/
import { Chart } from '@antv/g2';

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

chart.data({
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/seattle-weather.json',
});

chart
.interval()
.transform({ type: 'groupX', y: 'mean' })
.encode('x', (d) => new Date(d.date).getUTCMonth())
.encode('y', 'precipitation')
.scale('y', { tickCount: 5, domainMax: 6 })
.tooltip({ channel: 'y', valueFormatter: '.2f' });

chart
.lineY()
.transform({ type: 'groupX', y: 'mean' })
.encode('y', 'precipitation')
.style('stroke', '#F4664A')
.style('strokeOpacity', 1)
.style('lineWidth', 2)
.label({
text: { channel: 'y' }, // 使用 y 通道的值
});
```

Contributor guide

Open the contributing guide

Research direction

Start from the mark.label configuration in the provided G2 example and trace how label text values are resolved. Check how the y channel is represented in the label configuration, then verify the example can use `{ channel: 'y' }` and displays the expected values.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.