使用Angular2无法使用Chart.js

你好我试图使用从http://www.chartjs.org图表之一，但我不能使它的工作..我安装npm安装chart.js - 保存为文档要求和使用此代码来创建图表。使用Angular2无法使用Chart.js

.TS

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 


export class AppComponent { 

constructor(){ 

var lineChartData: [12, 19, 3, 5, 2, 3]; 
var lineChartLabels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]; 

var lineChartOptions: any = { 
    responsive: true, 
    animation: false, 
    beginAtZero:true 

    }; 
var lineChartColors: Array<any> = [ 
    { // grey 
     backgroundColor: 'rgba(33,150,243,0.2)', 
     borderColor: 'rgba(33,150,243,1)', 
     pointBackgroundColor: 'rgba(33,150,243,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(33,150,243,0.8)' 
    }, 
    { // dark grey 
     backgroundColor: 'rgba(76,175,80,0.2)', 
     borderColor: 'rgba(76,175,80,1)', 
     pointBackgroundColor: 'rgba(76,175,80,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(76,175,80,1)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(244,67,54,0.2)', 
     borderColor: 'rgba(244,67,54,1)', 
     pointBackgroundColor: 'rgba(244,67,54,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(244,67,54,0.8)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(103,58,183,0.2)', 
     borderColor: 'rgba(103,58,183,1)', 
     pointBackgroundColor: 'rgba(103,58,183,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(103,58,183,0.8)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(255,152,0,0.2)', 
     borderColor: 'rgba(255,152,0,1)', 
     pointBackgroundColor: 'rgba(255,152,0,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(255,152,0,0.8)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(96,125,139,0.2)', 
     borderColor: 'rgba(96,125,139,1)', 
     pointBackgroundColor: 'rgba(96,125,139,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(96,125,139,0.8)' 
    }  
    ]; 

    var lineChartLegend: boolean = true; 
    var lineChartType: string = 'line'; 


} 

}

.HTML

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

<canvas baseChart height="200" 
     [datasets]="lineChartData" 
     [labels]="lineChartLabels" 
     [options]="lineChartOptions" 
     [colors]="lineChartColors" 
     [legend]="lineChartLegend" 
     [chartType]="lineChartType" 
    ></canvas>

.MODULE

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { ChartsModule } from 'ng2-charts/ng2-charts'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    ChartsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

更新代码，页面是空白的，没有呃罗斯在控制台中，但此消息：

角正在运行在开发模式。调用enableProdMode（）以启用生产模式。

来源

2017-08-14 Ixam Deirf

Chart.js需要打包，所以它可以与打印机一起使用。使用import {chart} from 'chart.js';将不起作用。尝试不同的NPM库像这样的：

https://www.npmjs.com/package/ng2-charts

我已经受够了它的成功。应该解决你的问题。

根本不需要导入图表。

只需在您的html中包含您的购物车。类似这样的：

<canvas baseChart height="200" 
     [datasets]="lineChartData" 
     [labels]="lineChartLabels" 
     [options]="lineChartOptions" 
     [colors]="lineChartColors" 
     [legend]="lineChartLegend" 
     [chartType]="lineChartType" 
    ></canvas>

然后在你的组件中访问它。类似这样的：

lineChartData: Array<any>; 
lineChartLabels: string[] = [..data..  
    ]; 

    lineChartOptions: any = { 
    responsive: true, 
    animation: false, 

    }; 
    lineChartColors: Array<any> = [ 
    { // grey 
     backgroundColor: 'rgba(33,150,243,0.2)', 
     borderColor: 'rgba(33,150,243,1)', 
     pointBackgroundColor: 'rgba(33,150,243,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(33,150,243,0.8)' 
    }, 
    { // dark grey 
     backgroundColor: 'rgba(76,175,80,0.2)', 
     borderColor: 'rgba(76,175,80,1)', 
     pointBackgroundColor: 'rgba(76,175,80,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(76,175,80,1)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(244,67,54,0.2)', 
     borderColor: 'rgba(244,67,54,1)', 
     pointBackgroundColor: 'rgba(244,67,54,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(244,67,54,0.8)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(103,58,183,0.2)', 
     borderColor: 'rgba(103,58,183,1)', 
     pointBackgroundColor: 'rgba(103,58,183,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(103,58,183,0.8)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(255,152,0,0.2)', 
     borderColor: 'rgba(255,152,0,1)', 
     pointBackgroundColor: 'rgba(255,152,0,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(255,152,0,0.8)' 
    }, 
    { // grey 
     backgroundColor: 'rgba(96,125,139,0.2)', 
     borderColor: 'rgba(96,125,139,1)', 
     pointBackgroundColor: 'rgba(96,125,139,1)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(96,125,139,0.8)' 
    }  
    ]; 

    lineChartLegend: boolean = true; 
    lineChartType: string = 'line';

来源

2017-08-14 19:12:23 Notmfb

嗨，我从'ng2-charts/ng2-charts'中添加了import {ChartsModule};到应用程序的模块，但在组件，这使得一个错误： this.myChart =新图（this.ctx，{ 它说找不到名称表 –

你还在导入“图表”的成分。 – Notmfb

no im not ...我会为你上传新的代码，检查 –

使用Angular2无法使用Chart.js

回答

相关问题