ng2 charts
v6.0.1
Beaux graphiques pour Angular basés sur le graphique.js
Échantillons utilisant ng2-charts
https://valor-software.com/ng2-charts/
Vous pouvez installer Ng2 Carts en utilisant la CLI angulaire:
ng add ng2-charts Les packages requis seront automatiquement installés et votre app.config.ts sera mise à jour avec les modifications requises pour commencer à utiliser la bibliothèque immédiatement.
Vous pouvez installer NG2-Carts à l'aide de NPM:
npm install ng2-charts --saveou fil:
yarn add ng2-charts --save Vous devrez également installer et inclure la bibliothèque Chart.js dans votre application (il s'agit d'une dépendance par les pairs de cette bibliothèque, plus d'informations peuvent être trouvées dans la documentation officielle chart.js )
npm install chart.js --saveou avec du fil:
yarn add chart.js --saveImportez la directive dans votre composant autonome:
import { BaseChartDirective } from 'ng2-charts' ;
@ Component ( {
standalone : true ,
imports : [ BaseChartDirective ] ,
} )
export class MyComponent { } Fournissez une configuration, généralement dans votre main.ts :
import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;
bootstrapApplication ( AppComponent , {
providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;Alternativement, incluez une configuration minimale pour réduire la taille du bundle, par exemple:
provideCharts ( { registerables : [ BarController , Legend , Colors ] } ) ;Ou dans votre appmodule:
import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;
@ NgModule ( {
providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
bootstrap : [ AppComponent ] ,
} )
export class AppModule { }| Version Ng2 Carte | ||||||
| Version angulaire | v1.x | v2.x | v3.x | v4.x | v5.x | v6.x |
| 2 - 9 | ✓ | |||||
| 10 | ✓ | |||||
| 11 | ✓ | |||||
| 12 | ✓ | |||||
| 13 | ✓ | |||||
| 14 | ✓ | ✓ | ||||
| 15 | ✓ | ✓ | ||||
| 16 | ✓ | |||||
| 17 | ✓ | ✓ | ||||
Il existe une directive pour tous les types de graphiques: baseChart , et il existe 8 types de graphiques: line , bar , radar , pie , polarArea , doughnut , bubble et scatter . Vous pouvez utiliser la directive sur un élément canvas comme suit:
< canvas baseChart [data] =" barChartData " [options] =" barChartOptions " [type] =" 'bar' " > </ canvas >Remarque : Pour plus d'informations sur les options possibles, veuillez vous référer à la documentation du graphique original.js
type : ( ChartType ) - Indique le type de graphique, il peut être: line , bar , radar , pie , polarArea , doughnut ou tout type personnalisé ajouté à chart.jsdata : ( ChartData<TType, TData, TLabel> ) - Toute la structure de données à rendre dans le graphique. Soutenez différents formats flexibles et options d'analyse, voir ici. En alternative, et selon le type de votre graphique, vous pouvez utiliser les propriétés labels et datasets pour spécifier des options individuelles.labels : ( TLabel[] ) - Étiquettes de données. C'est nécessaire pour les graphiques: line , bar et radar . Et juste des étiquettes (sur planant) pour les graphiques: polarArea , pie et doughnut . Les étiquettes sont appariées dans l'ordre avec le tableau datasets .datasets : ( ChartDataset<TType, TData>[] ) - Identique à la propriété datasets de l'entrée data . Voir ici pour plus de détails.options : ( ChartOptions<TType> ) - Options de graphique (selon la documentation Chart.js).legend : ( boolean = false ) - Si vrai, la légende du graphique est affichée.chartClick : incendie lorsque vous cliquez sur un graphique s'est produit, renvoie des informations concernant les points actifs et les étiquetteschartHover : des incendies lorsque MouseMove (survol) sur un graphique s'est produit, renvoie des informations concernant les points actifs et les étiquettesPar défaut, cette bibliothèque utilise les couleurs telles que définies par chart.js. Si vous avez besoin de plus de contrôle sur les couleurs, par exemple: générer des couleurs à la volée, consultez les palettes de couleurs avancées.
Le ThemeService permet aux clients de définir une structure spécifiant les paramètres de remplacement des couleurs. Ce service peut être appelé lorsque le thème dynamique change, avec des couleurs qui correspondent au thème. La structure est interprétée comme un remplacement, avec des fonctionnalités spéciales lorsqu'ils traitent des tableaux. Exemple:
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 ;
} L'objet overrides a le même type que les ChartOptions d'objet Options du graphique, et partout où un champ simple est rencontré, il remplace le champ de correspondance dans l'objet options . Lorsqu'un tableau est rencontré (comme dans les champs xAxes et yAxes ci-dessus), l'objet unique à l'intérieur du tableau est utilisé comme modèle pour remplacer tous les éléments du tableau dans le champ de correspondance dans l'objet options . Ainsi, dans le cas ci-dessus, chaque axe aura ses tiques et ses couleurs de grille changées.
Veuillez suivre ces directives lors de la déclaration de bogues et de demandes de fonctionnalités:
Merci de votre compréhension!
La licence MIT (voir le fichier de licence pour le texte intégral)
Si vous aimez cette bibliothèque et que vous voulez dire merci, pensez à m'acheter un café!
