antvis/G2

interval重新设置数据报错 #6081

kaokei posted onGitHub

问题描述

我只是简单的使用饼图,点击某个按钮后需要刷新饼图,也就是赋值新的数据,此时报错。 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

重现链接

https://codesandbox.io/p/sandbox/smoosh-waterfall-7hnwlx?file=%2Findex.html

重现步骤

  1. 进入页面
  2. 点击重置按钮
  3. console会显示错误信息

预期行为

期望可以正常刷新饼图,但是出现了异常。

平台

应该是平台无关的

屏幕截图或视频(可选)

image

补充说明(可选)

我是参考的这里的方式实现的代码,不知道这个文档是否正确。 https://g2.antv.antgroup.com/manual/extra-topics/use-in-framework


你的 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();
});
posted by hustcc about 1 year ago

@hustcc 多谢啦,我想请教一下咱们有没有方便入门的文档。我看了我们的官方文档,说实话,我感觉就是小学生看大学论文,我完全不知道文档中很多概念的具体含义。

posted by kaokei about 1 year ago

多谢啦,我想请教一下咱们有没有方便入门的文档。我看了我们的官方文档,说实话,我感觉就是小学生看大学论文,我完全不知道文档中很多概念的具体含义。

文档目前还有大问题,我们抽时间优化下。可以先从官网教程看起,然后也可以记录下你的过程,给点建议,我们对可视化比较熟悉,所以写出来的教程和文档,很可能自己觉得写好了,实际写的就是垃圾!

posted by hustcc about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests