Comments (3)
你的 demo 中,在点击按钮的时候,调用:
chart.interval().data(...);
这个就创建了一个新的 interval
应该第一次创建的时候,就保存下 interval 变量,然后更新的时候直接使用,如下代码:
import { Chart } from "@antv/g2";
const data = [
{ item: "事例一", count: 40, percent: 0.4 },
{ item: "事例二", count: 21, percent: 0.21 },
{ item: "事例三", count: 17, percent: 0.17 },
{ item: "事例四", count: 13, percent: 0.13 },
{ item: "事例五", count: 9, percent: 0.09 },
];
const chart = new Chart({
container: "container",
autoFit: true,
});
chart.coordinate({ type: "theta", outerRadius: 0.8, innerRadius: 0.5 });
const i = chart
.interval()
.data(data)
.transform({ type: "stackY" })
.encode("y", "percent")
.encode("color", "item")
.legend("color", { position: "bottom", layout: { justifyContent: "center" } })
.label({
position: "outside",
text: (data) => `${data.item}: ${data.percent * 100}%`,
})
.tooltip((data) => ({
name: data.item,
value: `${data.percent * 100}%`,
}))
.animate("enter", {
type: "waveIn",
});
chart
.text()
.style("text", "主机")
// Relative position
.style("x", "50%")
.style("y", "50%")
.style("dy", -25)
.style("fontSize", 34)
.style("fill", "#8c8c8c")
.style("textAlign", "center");
chart
.text()
.style("text", "200")
// Relative position
.style("x", "50%")
.style("y", "50%")
.style("dx", -25)
.style("dy", 25)
.style("fontSize", 44)
.style("fill", "#8c8c8c")
.style("textAlign", "center");
chart
.text()
.style("text", "台")
// Relative position
.style("x", "50%")
.style("y", "50%")
.style("dx", 35)
.style("dy", 25)
.style("fontSize", 34)
.style("fill", "#8c8c8c")
.style("textAlign", "center");
chart.render();
document.getElementById("btn-reset").addEventListener("click", () => {
const newData = data.map((item) => ({
...item,
percent: Math.random(),
}));
i.data(newData);
chart.render();
});
from g2.
@hustcc 多谢啦,我想请教一下咱们有没有方便入门的文档。我看了我们的官方文档,说实话,我感觉就是小学生看大学论文,我完全不知道文档中很多概念的具体含义。
from g2.
多谢啦,我想请教一下咱们有没有方便入门的文档。我看了我们的官方文档,说实话,我感觉就是小学生看大学论文,我完全不知道文档中很多概念的具体含义。
文档目前还有大问题,我们抽时间优化下。可以先从官网教程看起,然后也可以记录下你的过程,给点建议,我们对可视化比较熟悉,所以写出来的教程和文档,很可能自己觉得写好了,实际写的就是垃圾!
from g2.
Related Issues (20)
- 如何通过Spec的方式声明多个View? HOT 2
- antv里面依赖lodash会有安全问题
- 【v5】使用官方文档代码报错 HOT 1
- 【V5】axia 轴线标题如何实现位置偏移无法自定义位置吗?
- Tooltip is not displayed for the second view. HOT 5
- 在第二个view上无法展示tooltip <Tooltip is not displayed on the second view> HOT 1
- g2plot折线图平滑度如何修改 HOT 1
- 使用facetRect() 做横向排列的对比直方图时,从第二个直方图起无法去掉Y轴label,而且Color 标题不能取消
- 配置slider的formatter后,sparkline不再显示
- 【V5】 折线图 缺少 encode('shape', 'vhv') 的样式
- 水波图显示问题5.x版本 HOT 2
- 2.5D柱状图tooltip不显示 HOT 2
- 水波图无法显示出来 HOT 4
- 面积图,图表数据全部为null时,如何不画线 HOT 1
- G2折线图卡死 HOT 1
- g2 v5 无法将图例展示在 bottom-center 位置
- 折线图监听事件不灵敏
- 简单条形图y轴刻度设置最小值,图形渲染异常
- g2图表库是否可以作为PIXI画布的子元素,我们想用pixi做数据图表的可视化搭建 HOT 4
- @antv/g2plot,散点气泡图中的四象限图,怎么监听每个象限的点击事件,产品需要拿每个象限的点击事件去做业务
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g2.