ng2 charts herunterladen - ng2 charts Quellcode herunterladen

ng2 charts

Anderer Quellcode

v6.0.1

Herunterladen

NG2-Charts Slack

Schöne Diagramme für Angular basierend auf Diagramm.js

Nutzung & Demo

Proben mit ng2-charts

https://valor-software.com/ng2-charts/

Installation

Sie können NG2-Charts mithilfe der Winkel-CLI installieren:

ng add ng2-charts

Die erforderlichen Pakete werden automatisch installiert und Ihre app.config.ts wird mit den erforderlichen Änderungen aktualisiert, um die Bibliothek sofort zu verwenden.

Handbuch Installation über Paketmanager

Sie können NG2-Charts mit NPM installieren:

npm install ng2-charts --save

oder Garn:

yarn add ng2-charts --save

Sie müssen auch die Bibliothek Chart.js -Bibliothek in Ihre Anwendung installieren und einbeziehen (es handelt sich um eine Peer -Abhängigkeit dieser Bibliothek. Weitere Informationen finden Sie in der offiziellen chart.js -Dokumentation).
```
npm install chart.js --save
```
oder mit Garn:
```
yarn add  chart.js --save
```

Importieren Sie die Richtlinie in Ihrer eigenständigen Komponente:

 import { BaseChartDirective } from 'ng2-charts' ;

@ Component ( {
  standalone : true ,
  imports : [ BaseChartDirective ] ,
} )
export class MyComponent { }

Geben Sie eine Konfiguration an, normalerweise in Ihrem main.ts :

 import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;

bootstrapApplication ( AppComponent , {
  providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;

Geben Sie alternativ eine minimale Konfiguration an, um die Bündelgröße z. B. die Größe des Bundle zu verringern:

 provideCharts ( { registerables : [ BarController , Legend , Colors ] } ) ;

Oder in Ihrer AppModule:

 import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;

@ NgModule ( {
  providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
  bootstrap : [ AppComponent ] ,
} )
export class AppModule { }

Kompatibilitätstabelle für Winkelversionen

	NG2-Chart-Version
Winkelversion	v1.x	v2.x	v3.x	v4.x	v5.x	v6.x
2 - 9	✓
10		✓
11		✓
12		✓
13			✓
14			✓	✓
15			✓	✓
16					✓
17					✓	✓

API

Diagrammtypen

Es gibt eine Richtlinie für alle Diagrammtypen: baseChart , und es gibt 8 Arten von Diagrammen: line , bar , radar , pie , polarArea , doughnut , bubble und scatter . Sie können die Anweisung auf einem canvas -Element wie folgt verwenden:

 < canvas baseChart [data] =" barChartData " [options] =" barChartOptions " [type] =" 'bar' " > </ canvas >

Eigenschaften

Hinweis : Weitere Informationen zu möglichen Optionen finden Sie unter Original -Diagramm.js Dokumentation

type : ( ChartType ) - Zeigt die Art des Diagramms an, es kann sein: line , bar , radar , pie , polarArea , doughnut oder einen benutzerdefinierten Typ, der zu Diagramm.js hinzugefügt wurde
data : ( ChartData<TType, TData, TLabel> ) - Die gesamte Datenstruktur, die in der Tabelle gerendert werden soll. Unterstützen Sie verschiedene flexible Formate und Parsenoptionen, siehe hier. Alternativ und abhängig vom type Ihres Diagramms können Sie die Eigenschaften labels und datasets verwenden, um individuelle Optionen anzugeben.
labels : ( TLabel[] ) - Datensätze Beschriftungen. Es ist für Diagramme erforderlich: line , bar und radar . Und nur Beschriftungen (auf Schwebeplätzen) für Diagramme: polarArea , pie und doughnut . Etiketten werden in der Reihenfolge mit dem datasets -Array abgestimmt.
datasets : ( ChartDataset<TType, TData>[] ) - Wie der datasets der data . Weitere Informationen finden Sie hier.
options : ( ChartOptions<TType> ) - Diagrammoptionen (gemäß Diagramm.JS -Dokumentation).
legend : ( boolean = false ) - Wenn wahr, wird die Diagrammlegende angezeigt.

Ereignisse

chartClick : Brennen Wenn es auf ein Diagramm klicken, gibt es Informationen zu aktiven Punkten und Beschriftungen zurück
chartHover : Brände, wenn Mousemove (HOVER) in einem Diagramm aufgetreten ist, gibt Informationen zu aktiven Punkten und Etiketten zurück

Farben

Standardmäßig verwendet diese Bibliothek die Farben wie durch Diagramm.js definiert. Wenn Sie mehr Kontrolle über Farben benötigen, z. B. im laufenden Fliegen erzeugen, sehen Sie sich die fortschrittlichen Farbpaletten an.

Dynamisches Themen

Mit dem ThemeService können Clients eine Struktur festlegen, in der Farbenüberschreibungseinstellungen angegeben werden. Dieser Service kann aufgerufen werden, wenn sich das dynamische Thema ändert, mit Farben, die zum Thema passen. Die Struktur wird als Übersteuerung mit besonderen Funktionen im Umgang mit Arrays interpretiert. Beispiel:

 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 ;
}

Das overrides hat den gleichen Typ wie die Diagrammoptionsobjekt ChartOptions , und wo immer ein einfaches Feld auftritt, ersetzt es das Matching -Feld im options . Wenn ein Array auftritt (wie in den oben genannten xAxes und yAxes -Feldern), wird das einzelne Objekt im Array als Vorlage verwendet, um alle Array -Elemente im Feld Matching im options zu überschreiben. In dem obigen Fall wird jede Achse ihre Zecken und Gridline -Farben geändert.

Fehlerbehebung

Bitte befolgen Sie diese Richtlinien, wenn Sie Fehler und Feature -Anfragen melden:

Verwenden Sie GitHub -Probleme, um Fehler und Funktionsanfragen zu melden.
Bitte geben Sie immer ein Beispielprojekt an und schreiben Sie Schritte, um den Fehler zu reproduzieren. Auf diese Weise können wir uns darauf konzentrieren, den Fehler zu reparieren und uns nicht an den Kopf zu kratzen, um ihn zu reproduzieren.

Danke fürs Verständnis!