Question

版本：Cordova：6.3.1，Gulp CLI：1.2.2，Ionic框架：2.0.0-rc.0，Ionic CLI版本：2.1.0

我在ionic2应用程序中使用ng2-charts。

不导入import {ChartsModule} from "ng2-charts"; 但由于this (issue #440)

，import {ChartsModule} from "ng2-charts/components/charts/charts;"

我的整个 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的问题。我发现使用npm安装的chart.js在index.html中将node_modules/chart.js/src/chart.js引用为Chart.bundle.min.js时会产生404。

所以我在下载了Chart.js之后无法正常工作我尝试下载src/assets/js/...本身。（将其放在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）。

ng2-charts\ng2-charts.js does not export ChartsModule的评论部分也解决了这个问题。但由于没有提供答案，这不是根本问题，我发布了这个问题。

错误：（抑制错误消息无效，因为它阻止我的应用加载）。

    function stopRKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; } else { fuNextFocus() }
    }
    document.onkeypress = stopRKey;


    function fuNextFocus ()
    {
        $(document).ready(function () {
            $("input").not($(":button")).keypress(function (evt) {
                if (evt.keyCode == 13) {
                    iname = $(this).val();
                    //Submit
                    if (iname !== 'Button') {
                        var next = $('[tabindex="' + (this.tabIndex + 1) + '"]');
                        if (next.length)
                            next.focus()
                        else
                            $('[tabindex="1"]').focus();
                    }

                }
            });
        });
    }

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>

ng2-charts - 无法绑定到“数据集”，因为它不是“基础图表”的已知属性

1 个答案: