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

Question

我搜索了很多关于 Angular2 图表包的信息，但没有找到 C3.js 的名称，直到我在下面的 link 中找到 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 Whosebug 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- 将以下代码添加到您的打字稿中

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

希望对你有所帮助，有问题欢迎留言

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

How add C3 charts to angular 2+ project

charts

c3.js

angular