g2plot 进度条更新数据
时间: 2023-10-14 15:16:26 浏览: 86
g2plot-react:用于React的G2Plot
要更新 g2plot 的进度条数据,你需要使用 `changeData` 方法。下面是一个示例代码:
```javascript
const data = [
{ name: 'Task 1', value: 50 },
{ name: 'Task 2', value: 30 },
{ name: 'Task 3', value: 20 },
];
const chart = new G2Plot.Progress(document.getElementById('container'), {
height: 100,
autoFit: true,
percent: 0.5,
color: ['#5B8FF9', '#E8EDF3'],
innerRadius: 0.8,
statistic: {
title: false,
content: {
style: {
fontSize: '20px',
fontWeight: 'bold',
},
formatter: () => '50%',
},
},
});
chart.render();
// 更新数据
data[0].value = 80;
chart.changeData(data);
```
在这个示例中,我们使用 `changeData` 方法更新了数据,并将第一个任务的完成度从 50% 更新为 80%。注意,在更新数据后,我们需要再次调用 `render` 方法重新渲染图表。
阅读全文