NG2-圖表 - 角4工作示例

我試圖用NG2，圖表與角4.0，我想用chart.js之有像這裏一樣的東西：NG2-圖表 - 角4工作示例

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

我做了什麼是

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

和我已經加入

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

爲src/index.html中

和

import { ChartsModule } from 'ng2-charts'; 

imports: [ 
    ChartsModule 
]

爲src /應用/ app.module.ts

你能告訴我的src/index.html的，SRC /應用/ app.component.html和應用程序的工作示例/component.ts爲它？因爲我在示例中遇到了一些問題

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.

即使我更改了chart.js位置。

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

}

來源

2017-06-14 EA_

嘗試增加'圖圖表= 「horizontalBar」''到<帆布baseChart' – yurzui

我現在能看到的東西，而不是白頁，謝謝！但我仍然有一個GET http：// localhost：4200/node_modules/chart.js/dist/Chart.bundle.min.js [HTTP/1.1 404 Not Found 1 ms]問題 –

如果您有'chart.js'作爲依賴項安裝，您可以從URL @EA_提供給您的包。否則，從'node_modules/ng2-chart/node_modules/chart.js/dist/Chart.bundle.min。js' –

更改您的chart.js 至

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

應用模塊TS碼

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

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

更新刪除腳本中的index.html和標籤中

添加檢查角cli.json和腳本陣列，然後在裏面加上：

「。 ./node_modules/chart.js/dist/Chart.bundle.min.js」

來源

2017-06-14 15:10:19 CharanRoot

GET http：// localhost：4200/node_modules/chart.js/dist/Chart.bundle.min.js [HTTP/1.1 404 Not Found 1 ms] 錯誤錯誤：「undefined」不是圖表類型。 –

你不需要通過腳本標籤包含js文件。包含在app.module.ts中就足夠了。 '從ng2-charts'導入{ChartsModule};' –

如何在angular-quickstart中添加此包，它顯示了systemJs文件中的修補程序問題 –

的chart.js文件除了增加.angular-cli.json，你只是缺少作爲輸入baseChart通過chartType。

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

來源

2017-06-14 15:29:16

NG2-圖表 - 角4工作示例

回答

相關問題