我搜索了很多有关 Angular2 图表包的信息,但没有找到 C3.js 的名称,直到我在下面的链接中找到了 C3.js 图表的示例
ani-angular.strapui.com/dashboard/charts/c3-chart
然后我搜索“C3 charts for angular”,找到的结果都是关于 AngularJS 项目的。即使在他们的website没有关于如何为 Angular 设置这个包的指南
我确定有一种方法可以将 C3 图表添加到 angular2+ 项目中。有没有人知道你是怎么做到的?
最佳答案
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]
]
}
});
}
希望对你有帮助,有问题可以评论
关于angular - 如何将 C3 图表添加到 Angular 2+ 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46250941/