ng2-graphiques - Angulaire 4 exemple de travail

Je suis en train d'utiliser ng2-graphiques Angulaire 4.0 et je voudrais avoir la même chose, comme ici, en utilisant chart.js:

    ...
    <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>

Ce que j'ai fait est

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

et j'ai ajouté

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

à src/index.html

import { ChartsModule } from 'ng2-charts';

imports: [
   ChartsModule
]

à la src/app/app.le module.ts

Pouvez-vous me montrer un exemple de travail de src/index.html, src/app/app.component.html et app/composant.ts pour elle? Parce que j'ai quelques problèmes avec elle, comme dans l'exemple

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.

même si je change l'chart.js emplacement.

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  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.composante.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]
  ];

}

Essayez d'ajouter chartType="horizontalBar" à <canvas baseChart
Je peux voir quelque chose maintenant, au lieu de la page blanche, merci! Mais j'ai encore un problème avec GET localhost:4200/node_modules/chart.js/dist/Chart.bundle.min.js [HTTP/1.1 404 not Found 1 ms]
Si vous avez chart.js installé comme une dépendance, vous pouvez obtenir le bundle à partir de l'adresse @EA_ vous a donné. Sinon, à partir de node_modules/ng2-chart/node_modules/chart.js/dist/Chart.bundle.min.js

InformationsquelleAutor EA_ | 2017-06-14

8

Changer votre chart.js
pour
```
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
```
application module ts code
```
import { ChartsModule } from 'ng2-charts/ng2-charts';

//In your App's module:
imports: [
   ChartsModule
]
```
Mise à jour
supprimer la balise script dans index.html et d'ajouter dans

vérifier votre angulaires-cli.json et scripts tableau, puis à l'intérieur d'ajouter:

"../node_modules/chart.js/dist/Chart.bundle.min.js"
- GET localhost:4200/node_modules/chart.js/dist/Chart.bundle.min.js [HTTP/1.1 404 not Found 1 ms] erreur ERREUR: "undefined" n'est pas un type de graphique.
- vous n'avez pas besoin d'inclure le fichier js via une balise script. L'inclusion dans l'app.le module.ts est assez. import { ChartsModule } from 'ng2-charts';
- comment je peux ajouter à ce forfait en angulaires-guide de démarrage rapide, il montre patch problème dans systemJs fichier
- je suis d'accord avec shaheen. peut-être que la réponse est plus. l'aide de la cli 1.4.3 et ng2-graphiques 1.6.0 j'ai installé ng2-graphiques via npm et importé le module graphique dans mon application module import { ChartsModule } from 'ng2-charts'; imports: [ BrowserModule, FormsModule, HttpClientModule, ChartsModule ] et j'ai été en mesure d'obtenir un graphique dans mon composant sans ajouter les scripts .angulaire de la cli.json. Je reçois effectivement un certain type d'erreur dans la console lorsque j'ajoute le script .angulaire de la cli.json.
InformationsquelleAutor CharanRoot

À part l'ajout de la chart.js fichier à .angular-cli.json, vous êtes juste la chartType passée comme une entrée à baseChart.

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

InformationsquelleAutor Mathias Rodriguez

0

importer { ChartsModule } à partir de 'ng2-graphiques/ng2-graphiques";

//Dans votre Application module:
importations: [
ChartsModule
]

InformationsquelleAutor sulabh

Vous devez vous connecter pour publier un commentaire.