NG2-Charts - Angular 4 Arbeitsbeispiel

Ich versuche, NG2-Charts mit kantigem 4.0 zu verwenden, und ich möchte wie hier die gleiche Sache haben, unter Verwendung von chart.js:NG2-Charts - Angular 4 Arbeitsbeispiel

... 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> 
    ... 

    <canvas id="myChart" width="400" height="400"></canvas> 
    <script> 
     var ctx = document.getElementById("myChart").getContext('2d'); 
     var chart = new Chart(ctx, { 
      // The type of chart we want to create 
      type: 'horizontalBar', 

      // The data for our dataset 
      data: { 
       labels: ["example1","example2","example3","example4","example5","example6","example7"], 
       datasets: [{ 
        label: "My First dataset", 
        backgroundColor: 'rgb(255, 99, 132)', 
        borderColor: 'rgb(255, 99, 132)', 
        data: [0, 10, 5, 2, 20, 30, 45] 
       },{ 
        label: "My second dataset", 
        backgroundColor: 'rgb(2, 99, 132)', 
        borderColor: 'rgb(255, 99, 132)', 
        data: [3, 10, 5, 2, 20, 30, 45] 
       }] 
      }, 

      // Configuration options go here 
      options: { 
       scales: { 
        xAxes: [{ 
         stacked: true 
        }], 
        yAxes: [{ 
         stacked: true 
        }] 
       } 
      } 
     }); 
    </script>

Was ich getan habe

ist

npm install ng2-charts --save 
npm install chart.js --save

und ich habe

<script src="node_modules/chart.js/src/chart.js"></script>

zu src/index.html

hinzugefügt

und

import { ChartsModule } from 'ng2-charts'; 

imports: [ 
    ChartsModule 
]

zu src/app/app.module.ts

Können Sie mir ein funktionierendes Beispiel für src/index.html zeigen, src/app/app.component.html und App /component.ts dafür? Weil ich einige Probleme damit habe wie im Beispiel

GET 
http://localhost:4200/node_modules/chart.js/src/chart.js [HTTP/1.1 404 Not Found 8 ms] 
ERROR Error: "undefined" is not a chart type.

auch wenn ich den Standort chart.js ändere.

src/index.html

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Chart</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 

    <script src="../node_modules/chart.js/src/chart.js"></script> 

</head> 

<body> 
    <app-root>Loading...</app-root> 
</body> 
</html>

src/app/app.component.html

<h1> 
    {{title}} 
</h1> 

    <div style="display: block"> 
     <canvas baseChart 
       [data]="chartData" 
       (chartHover)="chartHovered($event)" 
       (chartClick)="chartClicked($event)"></canvas> 
    </div> 
    <button (click)="randomize()">Update</button>

src/app/app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    public chartData: Array<any> = [ 
    [65, 59, 80, 81, 56, 55, 40], 
    [28, 48, 40, 19, 86, 27, 90] 
    ]; 

}

Quelle

2017-06-14 EA_

Versuchen Hinzufügen 'charttype = "horizontalBar"' auf '

ich jetzt etwas sehen kann, statt weißen Seite, danke! Aber ich habe immer noch ein Problem mit GET http: // localhost: 4200/node_module/chart.js/dist/Chart.bundle.min.js [HTTP/1.1 404 nicht gefunden 1 ms] –

Wenn Sie 'chart.js' haben Als Abhängigkeit installiert, könntest du das Paket von der URL bekommen, die dir @EA_ gegeben hat. Andernfalls von 'node_modules/ng2-chart/node_modules/chart.js/dist/Chart.bundle.min.js' –

Ändern Sie Ihre chart.js bis

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

App Modul ts Code

import { ChartsModule } from 'ng2-charts/ng2-charts'; 

// In your App's module: 
imports: [ 
    ChartsModule 
]

aktualisieren entfernen in index.html Script-Tag und fügen Sie in

überprüfen Sie Ihre Winkel cli.json und Skripte Array, dann drinnen fügen Sie hinzu:

". ./node_modules/chart.js/dist/Chart.bundle.min.js“

Quelle

2017-06-14 15:10:19 CharanRoot

GET http: // localhost: 4200/knotenmodule/chart.js/dist/Chart.bundle.min.js [HTTP/1.1 404 Nicht gefunden 1 ms] FEHLER Fehler: "undefined" ist kein Diagrammtyp . –

Sie müssen die js-Datei nicht über ein Skript-Tag einschließen. Die Aufnahme in app.module.ts ist ausreichend. 'import {ChartsModule} aus 'ng2-charts';' –

Wie kann ich dieses Paket in eckigen Schnellstart hinzufügen, es zeigt Patch Problem in systemJs Datei –

Neben Hinzufügen der chart.js Datei zu .angular-cli.json, Sie fehlt nur die chartType als Eingabe an baseChart weitergegeben.

<canvas baseChart 
     [chartType]="'horizontalBar'" 
     [data]="chartData" 
     (chartHover)="chartHovered($event)" 
     (chartClick)="chartClicked($event)"></canvas>

Quelle

2017-06-14 15:29:16

NG2-Charts - Angular 4 Arbeitsbeispiel

Antwort

Verwandte Themen