angular - 如何将 C3 图表添加到 Angular 2+ 项目

Question

我搜索了很多有关 Angular2 图表包的信息，但没有找到 C3.js 的名称，直到我在下面的链接中找到了 C3.js 图表的示例
ani-angular.strapui.com/dashboard/charts/c3-chart

然后我搜索“C3 charts for angular”，找到的结果都是关于 AngularJS 项目的。即使在他们的website没有关于如何为 Angular 设置这个包的指南

我确定有一种方法可以将 C3 图表添加到 angular2+ 项目中。有没有人知道你是怎么做到的？

Answer 1

There wasn't an answer on stackoverflow so I answer it by my self

1- 在您的项目根目录中运行此命令:

npm install c3
npm install @types/c3

2- 添加 "../node_modules/c3/c3.min.css",到 .angular-cli.json => 样式部分

(在 angular 6+ 添加 @import "../node_modules/c3/c3.min.css"; 到 styles.css)

3- 添加 <div id="chart"></div>到你的组件模板

4- 添加 import * as c3 from 'c3';到你的组件

5- 将以下代码添加到您的 typescript 中

ngAfterViewInit() {
    let chart = c3.generate({
    bindto: '#chart',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ]
        }
    });
}

希望对你有帮助，有问题可以评论