问题解决 : Angular8 引入G2图表库后控制台报错 Please specify the container for the chart

原创

于 2019-07-16 17:53:29 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angular #G2 #ng-alain

项目环境：

Angular CLI : 8.1
ng-alain : 8.0.0

问题重现：

按照G2官网的文档使用 npm install @antv/g2 --save 添加G2依赖后。在我展示页的Component 中的 constructor 里粘贴了官网给的代码：

如下:


============================ 报错写法 ============================
 
import { Component, OnInit } from '@angular/core';
import G2 from '@antv/g2';

const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300
});

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styles: []
})
export class SearchComponent {

  constructor() {
    const data = [ 
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 }
    ];

    // Step 1: 创建 Chart 对象
    const chart = new G2.Chart({
      container: 'c1