एनजी 2-चार्ट - 'डेटासेट' से बंधे नहीं जा सकते हैं क्योंकि यह 'बेस-चार्ट'

Question

संस्करणों: कॉर्डोवा: 6.3.1, गुलप सीएलआई: 1.2.2, आयनिक फ्रेमवर्क: 2.0। 0-rc.0 आयोनिक CLI संस्करण: 2.1.0

---

मैं अपने ionic2 आवेदन में ng2-charts उपयोग कर रहा हूँ।

आयात नहीं import {ChartsModule} from "ng2-charts"; लेकिन import {ChartsModule} from "ng2-charts/components/charts/charts;" वजह से this (issue #440)

मेरा पूरा app.module.ts

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { ChartsModule } from 'ng2-charts/components/charts/charts'; 

import { MyApp } from './app.component'; 
import { EventsPage } from '../pages/events/events.component'; 
import { ChartComponent } from '../pages/chart/chart.component'; 
import { APICaller } from '../services/APICaller.service'; 
import { EventDetailComponent } from '../pages/event-detail/event-detail.component'; 
import { ParticipantDetail } from '../pages/participant-detail/participant-detail.component'; 
import { ParticipantFeedComponent } from '../pages/participant-feed/participant-feed.component'; 



@NgModule({ 
    declarations: [ 
    MyApp, 
    EventsPage, 
    EventDetailComponent, 
    ParticipantDetail, 
    ParticipantFeedComponent, 
    ChartComponent 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp), 
    ChartsModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    EventsPage, 
    EventDetailComponent, 
    ParticipantDetail, 
    ParticipantFeedComponent, 
    ChartComponent 
    ], 
    providers: [APICaller] 
}) 
export class AppModule { } 

ChartComponent:

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'pie-chart', 
    template: ` 

<base-chart 
    class="chart" 
    [datasets]="datasets" 
    [labels]="labels" 
    [options]="options" 
    [chartType]="'doughnut'">Titel? 
</base-chart> 

` 
}) 
export class ChartComponent implements OnInit { 
    private datasets = [ 
     { 
      label: "# of Votes", 
      data: [12,19,3,5,2,3] 
     } 
    ]; 


    private labels = ['Red', 'blue', 'yellow', 'green', 'purple', 'orange']; 

    private options = { 
     scales: { 
      yAxes: [{ 
       beginAtZero: true 
      }] 
     } 
    }; 

    constructor() { 

    } 

    ngOnInit() { } 
} 

मैं इस पराक्रम सोचा Chart.js के साथ एक समस्या हो। और मैंने पाया कि chart.js एनपीएम के साथ स्थापित किया गया था जिसके परिणामस्वरूप 404 में मेरा index.htmlnode_modules/chart.js/src/chart.js के रूप में संदर्भित किया गया था।

इसलिए मैंने काम नहीं किया के बाद Chart.bundle.min.js डाउनलोड किया, मैंने Chart.js को डाउनलोड करने का प्रयास किया। (इसे src/assets/js/... में रखकर)।

इस समस्या को ng2-charts\ng2-charts.js does not export ChartsModule के टिप्पणी अनुभाग में भी संबोधित किया गया था। लेकिन चूंकि कोई जवाब नहीं दिया गया है और यह मूल प्रश्न नहीं था, मैंने इसे पोस्ट किया।

त्रुटि: (त्रुटिपूर्णता को दबाकर यह मेरी मदद नहीं करेगा क्योंकि यह मेरे ऐप को लोड होने से रोक रहा है)।

polyfills.js:3 Unhandled Promise rejection: Template parse errors: 
Can't bind to 'datasets' since it isn't a known property of 'base-chart'. 
1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module. 
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
(" 
    class="chart" 

    [ERROR ->][datasets]="datasets" 

    [labels]="labels" 
"): ChartComponent@4:4 
Can't bind to 'labels' since it isn't a known property of 'base-chart'. 
1. If 'base-chart' is an Angular component and it has 'labels' input, then verify that it is part of this module. 
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 
(" 
    [datasets]="datasets" 

    [ERROR ->][labels]="labels" 

    [options]="options" 
"): ChartComponent@6:4 

Answer 1

मैं इस पुस्तकालय उपयोग नहीं किया है, लेकिन सिर्फ the latest (1.4.1) version's source code में देखने से, यह एक कैनवास @Directive({selector: 'canvas[baseChart]'})

<canvas baseChart 
    class="chart" 
    [data]="datasets" 
    [labels]="labels" 
    [options]="options" 
    [chartType]="'doughnut'"> 
</canvas>