ng2-charts \ ng2-charts.js не экспортирует ChartsModule

Я пытаюсь использовать базовый пример NG2-Charts (http://valor-software.com/ng2-charts/)

Копирую вставленную часть HTML

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

и часть TypeScript

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;
 */
 }

Я запускаю npm install ng2-charts --save, npm install chart.js --save

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

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

После импорта ChartsModule я получаю сообщение об ошибке ng2-charts \ ng2-charts. js не экспортирует ChartsModule. Нажмите, чтобы просмотреть изображение ошибки

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


javascript angular chart.js ng2-charts ionic2
person Tuba Mohsin    schedule 13.10.2016    source источник
comment
Ознакомьтесь со следующим ответом по проблеме # 440 на их гитхабе.   -  person developer033    schedule 14.10.2016
comment
Тем не менее это не работает. Он также показывает ошибку, которая не может быть привязана к «наборам данных», поскольку это не известное свойство «холста».   -  person Tuba Mohsin    schedule 14.10.2016
comment
Вы создали проект с помощью angular-cli? Если это так, в файле angular-cli.json в разделе сценариев попробуйте добавить это: ../node_modules/chart.js/src/chart.js   -  person A B    schedule 16.10.2016

Ответы (1)


arrow_upward
3
arrow_downward

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

Он также показывает ошибку, которая не может быть привязана к «наборам данных», поскольку это не известное свойство «холста».

вероятно, из-за того, что 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()
]

Документация для этой библиотеки могла быть лучше.

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

person SpartanSoft    schedule 02.06.2017
comment
ссылка не работает - person Christopher Cabezudo Rodriguez; 12.09.2019