如何将C3图表添加到Angle 2+项目中 [英] How add C3 charts to angular 2+ project

问题描述

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

I searched a lot about Angular2 chart packages but there was no name of C3.js till I found an example of C3.js charts in link below
ani-angular.strapui.com/dashboard/charts/c3-chart

然后，我搜索了"C3角度图表"，发现的结果全都与AngularJS项目有关.即使在他们的网站上，也没有关于如何为角度设置此程序包的指南

Then I searched for "C3 charts for angular" founded results was all about AngularJS projects. Even on their website was no guide to how to setup this package for angular

我敢肯定，有一种方法可以将C3图表添加到angular2 +项目中.有谁知道你是怎么做到的?

I'm sure there is a way that you can add C3 chart to angular2+ project. Is there anyone that know how you do this?

推荐答案

没有关于stackoverflow的答案，所以我自己回答

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

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

1- run this command in your project root:

npm install c3
npm install @types/c3

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

2- add "../node_modules/c3/c3.min.css", to .angular-cli.json => style section

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

    (In angular 6+ add @import "../node_modules/c3/c3.min.css"; to styles.css)

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

3- add <div id="chart"></div> to your component template

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

4- add import * as c3 from 'c3'; to your component

5-在您的打字稿中添加波纹管代码

5- add bellow codes to your typescript

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

希望对您有帮助，如有问题请发表评论

I hope will it be helpful for you, comment if there was any problem

这篇关于如何将C3图表添加到Angle 2+项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！