web-dev-qa-db-fra.com

Comment ajouter des graphiques C3 au projet angular 2+

J'ai beaucoup cherché sur les packages de graphiques Angular2 mais il n'y avait pas de nom de C3.js jusqu'à ce que je trouve un exemple de graphiques C3.js dans le lien ci-dessous
ani-angular.strapui.com/dashboard/charts/c3-chart

Ensuite, j'ai recherché les "graphiques C3 pour angulaire". Les résultats fondés concernaient les projets AngularJS. Même sur leur site Web n'était pas un guide sur la façon de configurer ce package pour angulaire

Je suis sûr qu'il existe un moyen d'ajouter un graphique C3 au projet angular2 +. Y a-t-il quelqu'un qui sait comment vous procédez?

angularchartsc3.js
14
Vala Khosravi

Il n'y avait pas de réponse sur stackoverflow donc je réponds par moi-même

1- Exécutez cette commande dans la racine de votre projet:

npm install c3
npm install @types/c3

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

(Dans angular 6+ ajouter @import "../node_modules/c3/c3.min.css"; à styles.css)

3- ajouter <div id="chart"></div> à votre modèle de composant

4- ajouter import * as c3 from 'c3'; à votre composant

5- Ajoutez des codes ci-dessous à votre TypeScript

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

J'espère que cela vous sera utile, commentez s'il y a eu un problème

43
Vala Khosravi