ng2 charts
v6.0.1
chart.jsに基づく角度の美しいチャート
ng2-chartsを使用したサンプル
https://valor-software.com/ng2-charts/
Angular CLIを使用して、 NG2-Chartsをインストールできます。
ng add ng2-charts必要なパッケージは自動的にインストールされ、 app.config.tsは必要な変更とともに更新され、すぐにライブラリの使用を開始します。
NPMを使用してNG2-Chartsをインストールできます。
npm install ng2-charts --saveまたは糸：
yarn add ng2-charts --saveまた、アプリケーションにChart.jsライブラリをインストールして含める必要があります（これはこのライブラリのピア依存関係です。公式のchart.jsドキュメントを詳細にご覧ください）
npm install chart.js --saveまたは糸で：
yarn add chart.js --saveスタンドアロンコンポーネントにディレクティブをインポートします。
import { BaseChartDirective } from 'ng2-charts' ;
@ Component ( {
standalone : true ,
imports : [ BaseChartDirective ] ,
} )
export class MyComponent { }通常、 main.tsで構成を提供します。
import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;
bootstrapApplication ( AppComponent , {
providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;または、バンドルサイズを削減するための最小限の構成を含めます。
provideCharts ( { registerables : [ BarController , Legend , Colors ] } ) ;またはあなたのappmoduleで：
import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;
@ NgModule ( {
providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
bootstrap : [ AppComponent ] ,
} )
export class AppModule { }| NG2-CHARTバージョン | ||||||
| 角度バージョン | v1.x | v2.x | v3.x | v4.x | v5.x | v6.x |
| 2-9 | ✓✓ | |||||
| 10 | ✓✓ | |||||
| 11 | ✓✓ | |||||
| 12 | ✓✓ | |||||
| 13 | ✓✓ | |||||
| 14 | ✓✓ | ✓✓ | ||||
| 15 | ✓✓ | ✓✓ | ||||
| 16 | ✓✓ | |||||
| 17 | ✓✓ | ✓✓ | ||||
すべてのチャートタイプには1つの指令があります： baseChart 、およびline 、 bar 、 radar 、 pie 、 polarArea 、 doughnut 、 bubble 、 scatterの8種類のチャートがあります。次のように、 canvas要素の指令を使用できます。
< canvas baseChart [data] =" barChartData " [options] =" barChartOptions " [type] =" 'bar' " > </ canvas >注：可能なオプションの詳細については、元のchart.jsドキュメントを参照してください
type ：（ ChartType ） - チャートのタイプを示します。 line 、 bar 、 radar 、 pie 、 polarArea 、 doughnut 、またはchart.jsに追加されたカスタムタイプを示します。data ：（ ChartData<TType, TData, TLabel> ） - チャートでレンダリングされるデータ構造全体。さまざまな柔軟な形式と解析オプションをサポートしてください。こちらをご覧ください。代替案では、チャートのtypeに応じて、 labelsとdatasetsプロパティを使用して個々のオプションを指定できます。labels ：（ TLabel[] ） - データセットラベル。チャートには、 line 、 bar 、 radarが必要です。チャート用のラベル（ホバー）： polarArea 、 pie 、 doughnut 。ラベルは、 datasets配列と順番に一致します。datasets ：（ ChartDataset<TType, TData>[] ） - data入力のdatasetsプロパティと同じ。詳細については、こちらをご覧ください。options ：（ ChartOptions<TType> ） - チャートオプション（chart.jsドキュメントに従って）。legend ：（ boolean = false ） - 真の場合、チャートの凡例が表示されます。chartClick ：チャートをクリックすると発射が発生し、アクティブポイントとラベルに関する情報を返しますchartHover ：チャートのMousemove（Hover）が発生したときに発火し、アクティブポイントとラベルに関する情報を返しますデフォルトでは、このライブラリはchart.jsで定義されている色を使用します。色をさらに制御する必要がある場合は、例：その場で色を生成するには、高度なカラーパレットを参照してください。
ThemeService使用すると、クライアントは設定を上書きする色を指定する構造を設定できます。このサービスは、ダイナミックテーマが変更されたときに呼び出され、テーマに合った色があります。構造はオーバーライドとして解釈され、配列を扱うときに特別な機能があります。例：
type Theme = 'light-theme' | 'dark-theme' ;
private _selectedTheme: Theme = 'light-theme' ;
public get selectedTheme ( ) {
return this . _selectedTheme ;
}
public set selectedTheme ( value ) {
this . _selectedTheme = value ;
let overrides : ChartOptions ;
if ( this . selectedTheme === 'dark-theme' ) {
overrides = {
legend : {
labels : { fontColor : 'white' }
} ,
scales : {
xAxes : [ {
ticks : { fontColor : 'white' } ,
gridLines : { color : 'rgba(255,255,255,0.1)' }
} ] ,
yAxes : [ {
ticks : { fontColor : 'white' } ,
gridLines : { color : 'rgba(255,255,255,0.1)' }
} ]
}
} ;
} else {
overrides = { } ;
}
this . themeService . setColorschemesOptions ( overrides ) ;
}
constructor ( private themeService : ThemeService < AppChartMetaConfig > ) {
}
setCurrentTheme ( theme : Theme ) {
this . selectedTheme = theme ;
} overridesオブジェクトは、チャートオプションオブジェクトチャラChartOptionsと同じタイプを持ち、単純なフィールドに遭遇した場合は、 optionsオブジェクトの一致するフィールドを置き換えます。 （上記のxAxesとyAxesフィールドのように）アレイに遭遇すると、配列内の単一オブジェクトがテンプレートとして使用され、 optionsオブジェクトの一致するフィールドのすべての配列要素をオーバーライドします。したがって、上記の場合、すべての軸にはダニとグリッドラインの色が変わります。
バグと機能のリクエストを報告するときは、このガイドラインに従ってください。
理解してくれてありがとう！
MITライセンス（全文のライセンスファイルを参照）
このライブラリが好きで、ありがとうと言いたい場合は、コーヒーを買うことを検討してください！
