首先

本篇是我的首次投稿。首先，我想通过一个简单的主题来尝试投稿。
由于我在工作中使用了Angular项目中的C3.js，因此我将在此文中记录下使用方法。

前面所述的条件

假设已经安装了Angular CLI。
作者安装的CLI版本是7.2.1。

创建Angular项目

参考链接：https://qiita.com/nrainiero/items/de5edec1ca7d85abcc71

请用中文重新表述，仅需提供一种选项：

请看：https://qiita.com/nrainiero/items/de5edec1ca7d85abcc71

请执行以下命令。

~$ ng new my-angular-proj

执行后，回答以下问题。
作者没有添加Angular Routing，并指定了CSS样式表。
（这是一个只使用C3.js的简单项目，所以没有添加Routing，但实际上添加会更方便。）

Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ http://sass-lang.com   ] 
  SASS   [ http://sass-lang.com   ] 
  LESS   [ http://lesscss.org     ] 
  Stylus [ http://stylus-lang.com ] 

安装C3.js

进入项目文件夹，安装C3.js。

~/my-angular-proj$ npm install c3
~/my-angular-proj$ npm install -D @types/c3

尝试使用Angular绘制图表

在没有忘记的情况下，先导入C3.js的CSS文件。

@import "../node_modules/c3/c3.min.css";

本次我们将在已经创建的app.component中使用Angular CLI来编写图表。
HTML模板如下所示。

<div id="chart"></div>

以下是ts文件的内容。

import { Component, AfterViewInit } from '@angular/core';
import * as c3 from 'c3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit {
  private data: any[] = ["data", 1, 2, 3, 4, 5];
  private chart: c3.ChartAPI;

  ngAfterViewInit(): void {
    this.chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [this.data]
      }
    });
  }
}

请在浏览器中确认

首先进行构建

~/my-angular-proj$ npm start