顯示圖表 - 角2

我想顯示圖表，即我的角度2應用程序中的折線圖。但我對圖表的顯示方式很陌生。我正在關注來自valor軟件的文檔，但我沒有得到一個好的結果。在我的控制檯中顯示錯誤。我在我的app.module.ts中導入了ChartsModule。我必須對摺線圖做些什麼？顯示圖表 - 角2

dashboard.html

<div class="row"> 
    <div class="col-md-6"> 
    <div style="display: block;"> 
    <canvas baseChart width="400" height="400" 
       [datasets]="lineChartData" 
       [labels]="lineChartLabels" 
       [options]="lineChartOptions" 
       [colors]="lineChartColors" 
       [legend]="lineChartLegend" 
       [chartType]="lineChartType" 
       (chartHover)="chartHovered($event)" 
       (chartClick)="chartClicked($event)"></canvas> 
    </div> 
    </div> 
    <div class="col-md-6" style="margin-bottom: 10px"> 
    <table class="table table-responsive table-condensed"> 
     <tr> 
     <th *ngFor="let label of lineChartLabels">{{label}}</th> 
     </tr> 
     <tr *ngFor="let d of lineChartData"> 
     <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td> 
     </tr> 
    </table> 
    <button (click)="randomize()">CLICK</button> 
    </div> 
</div>

dashboardComponent

@Component({ 
    selector: 'line-chart-demo', 
    templateUrl: './dashboard.html' 
}) 
export class LineChartDemoComponent { 
    // lineChart 
    public lineChartData:Array<any> = [ 
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}, 
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}, 
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'} 
    ]; 
    public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; 
    public lineChartOptions:any = { 
    responsive: true 
    }; 
    public lineChartColors:Array<any> = [ 
    { // grey 
     backgroundColor: 'rgba(148,159,177,0.2)', 
     borderColor: 'rgba(148,159,177,1)', 
     pointBackgroundColor: 'rgba(148,159,177,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(148,159,177,0.8)' 
    }, 
    { // dark grey 
     backgroundColor: 'rgba(77,83,96,0.2)', 
     borderColor: 'rgba(77,83,96,1)', 
     pointBackgroundColor: 'rgba(77,83,96,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(77,83,96,1)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(148,159,177,0.2)', 
     borderColor: 'rgba(148,159,177,1)', 
     pointBackgroundColor: 'rgba(148,159,177,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(148,159,177,0.8)' 
    } 
    ]; 
    public lineChartLegend:boolean = true; 
    public lineChartType:string = 'line'; 

    public randomize():void { 
    let _lineChartData:Array<any> = new Array(this.lineChartData.length); 
    for (let i = 0; i < this.lineChartData.length; i++) { 
     _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label}; 
     for (let j = 0; j < this.lineChartData[i].data.length; j++) { 
     _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1); 
     } 
    } 
    this.lineChartData = _lineChartData; 
    } 

    // events 
    public chartClicked(e:any):void { 
    console.log(e); 
    } 

    public chartHovered(e:any):void { 
    console.log(e); 
    } 
}

角cli.json

"scripts": [ 
     "../node_modules/chart.js/src/chart.js" 

     ],

錯誤

Uncaught ReferenceError: require is not defined 
    at eval (eval at webpackJsonp.1166.module.exports (addScript.js:9), <anonymous>:4:38) 
    at eval (<anonymous>) 
    at webpackJsonp.1166.module.exports (addScript.js:9) 
    at Object.519 (chart.js?7d5f:1) 
    at __webpack_require__ (bootstrap 48f1b30…:52) 
    at Object.1215 (addScript.js:10) 
    at __webpack_require__ (bootstrap 48f1b30…:52) 
    at webpackJsonpCallback (bootstrap 48f1b30…:23) 
    at scripts.bundle.js:1

來源

2017-03-06 Liska Liskor

看起來你正在使用的WebPack通常解決這個問題，因爲需要（）上不可的JavaScript客戶端，但是有可能是出錯了webpack.config.js文件？你可以在你的問題發佈它，因爲我相信這將是你的問題，並在webpack比我更好的人將能夠找到它 – BenYeomans

@BenYeomans，我沒有任何文件名爲webpack在我的文件夾 –

嘗試添加添加到您的dashboard.html或如果第一個不起作用，您可以放置您正在關注哪些文檔的鏈接？ – BenYeomans

包括在你的dashboard.html <script src="node_modules/chart.js/src/chart.js"></script>。
將<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>添加到您的index.html文件中。

來源

2017-03-06 12:39:13 Switz

謝謝..這工作！ –

首先，你必須安裝chart.js之

npm install ng2-charts chart.js --save 

once it's done need to import it in your app.module.ts file 
import { ChartsModule } from 'ng2-charts'; 
@NgModule(declarations: [], 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
ChartsModule,

]）

這些圖表是依賴於C3所以必須包括這也

npm install c3

決賽你已經錯過了它的東西，你還必須添加風格ü的nDer angular.cli.json

"styles": [ 
    "../node_modules/c3/c3.min.css" 
    ],

來源

2017-11-09 05:53:48

顯示圖表 - 角2

回答

相關問題