antvis / antvis/G2

饼图中如何在数据更新时不产生动画效果

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

Description

### 问题描述

我在使用饼图时,通过点击事件触发数据变化后,扇区的颜色发生变化,但是我发现当我点击的时候,扇区会有动画,但我并不希望拥有这个动画,我尝试用一下的方式进行关闭,但似乎不起作用:

``` typescript
const draw = async (list: typeof chartDataList) => {
const chart = new Chart({
container: "chart",
width: 300,
height: 240,
});
chart.coordinate({ type: "theta", innerRadius: 0.6, outerRadius: 0.8 });
chart
.interval()
.data(list)
.transform({ type: "stackY" })
.encode("y", "value")
.label({
position: "outside",
fontWeight: 600,
fill: (data) => (data.isHighlight ? "#CE824E" : "#222222"),
text: (data) => `省¥${data.saveMoney} \n ${data.lineName}`,
})
.style("radius", 4)
.style("stroke", "#fff")
.style("lineWidth", 2)
.style("fill", (data) => (data.isHighlight ? "#CE824E" : "#222222"))
.animate("enter", { type: "waveIn" })
.animate("update", {
type: false,
}) // ❎ 我使用了该方法,但这似乎不起作用
.legend(false)
.tooltip(false);

chart.on("interval:click", async (event) => {
const { data } = event;
const lineName = data.data.lineName;
const list = changeChartDataHighlightByLineName(lineName, chartDataList);
chart.changeData(list);
});

chart.render();
};
```

### 重现链接

_No response_

### 重现步骤

_No response_

### 预期行为

我希望数据更新时,没有动画,但是动画似乎一直存在

### 平台

- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]

### 屏幕截图或视频(可选)

_No response_

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the chart.changeData call and the interval animation configuration, especially animate("update", { type: false }). Reproduce the click-driven data update from the issue, trace which animation is applied after the change, and verify that updating the highlighted slice no longer produces motion while the enter animation remains unchanged.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.