Coder Social home page Coder Social logo

interval重新设置数据报错 about g2 HOT 3 CLOSED

kaokei avatar kaokei commented on May 18, 2024
interval重新设置数据报错

from g2.

Comments (3)

hustcc avatar hustcc commented on May 18, 2024

你的 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.

kaokei avatar kaokei commented on May 18, 2024

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

from g2.

hustcc avatar hustcc commented on May 18, 2024

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

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

from g2.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.