interval重新设置数据报错

[kaokei]

问题描述

我只是简单的使用饼图，点击某个按钮后需要刷新饼图，也就是赋值新的数据，此时报错。
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会显示错误信息

预期行为

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

平台

应该是平台无关的

屏幕截图或视频（可选）

补充说明（可选）

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

[hustcc]

你的 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();
});

[kaokei]

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

[hustcc]

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

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