如何将C3图表添加到角度2+项目中

Question

我搜索了很多关于Angular2图表包,但没有C3.js的名字,直到我发现下面的链接C3.js图表的例子
ani-angular.strapui.com/dashboard/charts/c3-chart

然后我搜索了"有角度的C3图表"创建的结果是关于AngularJS项目.即使在他们的网站上也没有指导如何为角度设置此包

我确信有一种方法可以将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]
            ]
        }
    });
}

我希望它会对你有所帮助,如有任何问题请评论