web-dev-qa-db-ja.com

C3チャートをangular 2+プロジェクトに追加する方法

Angular2チャートパッケージについてよく検索しましたが、下のリンクでC3.jsチャートの例を見つけるまでC3.jsの名前はありませんでした
ani-angular.strapui.com/dashboard/charts/c3-chart

次に、「角度のC3チャート」を検索しましたが、結果はすべてAngularJSプロジェクトに関するものでした。 website でも、このパッケージを角度用にセットアップする方法のガイドはありませんでした

Angular2 +プロジェクトにC3チャートを追加できる方法があると確信しています。あなたがこれをどのように行うかを知っている人はいますか？

angularchartsc3.js
14
Vala Khosravi

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- TypeScriptに以下のコードを追加します

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

問題があればコメントしてください。

43
Vala Khosravi