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

Question

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

然后我搜索“角度的 C3 图表”，发现结果都是关于 AngularJS 项目的。即使在他们的website 上也没有关于如何为角度设置这个包的指南

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

Answer 1

stackoverflow 上没有答案，所以我自己回答了

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]
            ]
        }
    });
}

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