2016-10-13 11 views
3

Я пытаюсь использовать базовый пример NG2-диаграммы (http://valor-software.com/ng2-charts/)NG2-графики NG2-charts.js не экспортирует ChartsModule

Я копию вставил HTML часть

<div style="display: block"> 
<canvas baseChart 
     [datasets]="barChartData" 
     [labels]="barChartLabels" 
     [options]="barChartOptions" 
     [legend]="barChartLegend" 
     [chartType]="barChartType" 
     (chartHover)="chartHovered($event)" 
     (chartClick)="chartClicked($event)"></canvas> 

и машинописи часть

public barChartOptions:any = { 
scaleShowVerticalLines: false, 
responsive: true 
}; 
public barChartLabels:string[] = 
['2006', '2007', '2008', '2009', '2010','2011', '2012']; 

public barChartType:string = 'bar'; 
public barChartLegend:boolean = true; 

public barChartData:any[] = [ 
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'}, 
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'} 
]; 

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

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

public randomize():void { 
// Only Change 3 values 
let data = [ 
Math.round(Math.random() * 100), 
    59, 
    80, 
(Math.random() * 100), 
56, 
(Math.random() * 100), 
40]; 
let clone = JSON.parse(JSON.stringify(this.barChartData)); 
clone[0].data = data; 
this.barChartData = clone; 
/** 
* (My guess), for Angular to recognize the change in the dataset 
* it has to change the dataset variable directly, 
* so one way around it, is to clone the data, change it and then 
* assign it; 
*/ 
} 

Я бегу НПМ установки NG2-диаграмм --save, НПМ установить chart.js --save

Я также импортировать ChartsModule в app.module.ts

import { ChartsModule } from 'ng2-charts/ng2-charts'; 
@NgModule({ 
    imports: [ChartsModule] 
}) 

After importing ChartsModule I am getting an error that ng2-charts\ng2-charts.js does not export ChartsModule. Click to view the image of an error

ли кто-нибудь имеет представление о том, как исправить это? Спасибо

+1

Пожалуйста, обратите внимание на следующий ответ на вопрос [** # 440 **] (HTTPS : //github.com/valor-software/ng2-charts/issues/440#issuecomment-251671800) в своем github. – developer033

+0

Еще не работает. Также отображается ошибка, которая «не может связываться с наборами данных», так как это не известное свойство «canvas». –

+0

Создал ли проект проект с помощью углового-cli? Если это так, в файле angular-cli.json в разделе «скрипты» попробуйте добавить это: «../node_modules/chart.js/src/chart.js» –

ответ

2

Второй вопрос в комментариях

Это также показывает ошибку, что «не может связываться с„наборов данных“, поскольку она не является известным свойством„холст“

, вероятно, из-за не импортировать ChartsModule в модуль, который оказывающая диаграмму.

я столкнулся с той же начальной проблемой и смог мимо него, добавив следующее мой файл rollup-config

plugins: [ 
    nodeResolve({jsnext: true, module: true}), 
    commonjs({ 
     include: ['node_modules/rxjs/**','node_modules/ng2-charts/**'], 
     namedExports: {'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']} 
    }), 
    uglify() 
] 

Документация для этой библиотеки могла бы быть лучше. Я столкнулся с несколько других вопросов, а также которые я документированы http://spartansoft.net/installing-ng2-charts-for-an-angular-4-project/

Я надеюсь, что пост может помочь любому сталкиваясь с подобными проблемами

 Смежные вопросы

  • Нет связанных вопросов^_^