antvis/G2

Chart does not display #3769

erlebach posted onGitHub

I am looking for a Forum to discuss issues with G2. Since I have not found one, I am posing the question here. The following self-contained chart does not display in Vue 3:

      dc.initializeChart();
      // dcg2.initializeChart(); // NOT DISPLAYING!!
      // Data from https://github.com/liximomo/g2
      const data = [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 1150 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 },
      ];
      const chart = new G2.Chart({
        // NOT DISPLAYING!!
        container: "mountEndpointsG2Chart",
        width: 500,
        height: 500,
      });

      chart.data(data);
      chart
        .interval()
        .position("genre*sold")
        .color("genre");
      chart.render();
    });

Here is my mountpoint:

<div class="p-d-flex"> <div class="flex p-flex-row"> <Button label="Toggle Orientation" @click="toggleG2ChartOrientation" /> <div class="flex p-flex-column"> <h2>Delay Propagation: global view (@antv/G2)</h2> <h3> Imposed [30, 45, 60] min arrival delay on all airborne flights </h3> <div id="mountEndpointsG2Chart"></div> </div> </div> </div>

Any help is appreciated.

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前,请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题(错别字修改,小的 bug fix)直接提交 PR。 3. 如果是一个新需求,请提供:详细需求描述,最好是有伪代码实现。 4. 如果是一个 BUG,请提供:复现步骤,错误日志以及相关配置,并尽量填写下面的模板中的条目。 5. 如果可以,请提供尽可能精简的 CodePen 链接,可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox,方便我们排查问题。 6. 扩展阅读:如何向开源项目提交无法解答的问题 -->

  • G2 Version:
  • Platform:
  • Mini Showcase(like screenshots):
  • CodePen Link:

<!-- Enter your issue details below this comment. -->


Hi erlebach! here is my code to show the chart:

import * as G2 from "@antv/g2";

const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 1150 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 }
];
const chart = new G2.Chart({
  container: "mountEndpointsG2Chart",
  width: 500,
  height: 500
});

chart.data(data);
chart.interval().position("genre*sold").color("genre");
chart.render();

my codesandbox

your code seems to work fine. If it still doesnt work, can you reproduce that and share a codesandbox?

posted by rainy-25Ghz over 3 years ago

I got my charts to work, thanks.

posted by erlebach about 3 years ago

Fund this Issue

$0.00
Funded

Pull requests