0

我的 HTML 标记如下所示，我使用的是依赖于 chart.js 的 NG2-Chart 库的饼图：

<h2>Home</h2>
<div style="display: block">
    <canvas baseChart class="chart"
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pie"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
    </canvas>
</div>

我已经编写了以下代码添加它工作得很好。我也可以看到图表并获得对事件处理程序的调用。我的组件代码（工作）如下所示：

import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
import {NgClass} from '@angular/common';

import {PieChartData} from '../shared/pie-chart-data';
import {HotelsService} from '../components/hotel/hotels.service';
import {Hotel} from '../entities/hotel';


import * as _ from 'underscore/underscore';

@Component({
    selector:'home'
    , templateUrl:'app/home/home.component.html'
})
export class HomeComponent implements OnInit{
    hotels: Hotel[];
    hotelCountByCity; 
    data = new PieChartData();

    pieChartData = [];
    pieChartLabels=[];

    constructor(private _hotelsService: HotelsService){}

    ngOnInit(){
        this.getActiveHotelsByCity();        

        console.log("On Init");
    }

    // events
    public chartClicked(e:any):void {
        // TODO : should open another chart which is not decided.
    }

    public chartHovered(e:any):void {
        // TODO : do something
    }

    private getActiveHotelsByCity(){ 
        //this.data.pieChartType = "pie";
        this.pieChartLabels = ["One", "Two", "Three"]; 
        this.pieChartData = [100,200,300];
    }
}

但是当我尝试从 Web 服务获取数据并将其分配给饼图时，我得到了奇怪的错误。我的组件代码（不工作）：

import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
import {NgClass} from '@angular/common';

import {PieChartData} from '../shared/pie-chart-data';
import {HotelsService} from '../components/hotel/hotels.service';
import {Hotel} from '../entities/hotel';

import * as _ from 'underscore/underscore';

@Component({
    selector:'home'
    , templateUrl:'app/home/home.component.html'
})
export class HomeComponent implements OnInit{
    hotels: Hotel[];
    hotelCountByCity; 
    data = new PieChartData();

pieChartData = [];
pieChartLabels=[];

constructor(private _hotelsService: HotelsService){}

ngOnInit(){
    this.getActiveHotelsByCity();        

    console.log("On Init");
}

// events
public chartClicked(e:any):void {
    // TODO : should open another chart which is not decided.
}



   public chartHovered(e:any):void {
        // TODO : do something
    }

    private getActiveHotelsByCity(){  
        this._hotelsService.getAllActiveHotels()
                                .subscribe(
                                    res => this.hotelCountByCity =
                                                    _.countBy(
                                                        res.data.hotels
                                                        ,function(hotel: Hotel) {
                                                            return hotel.address.city;
                                                        })
                                    ,null
                                    , ()=> {
                                        this.pieChartLabels = _.keys(this.hotelCountByCity);
                                        this.pieChartData = _.values(this.hotelCountByCity);
                                        console.log("Reached success part of request");
                                    }
                                );
    }
}

我最初得到的错误堆栈树如下：

例外：未捕获（在承诺中）：TypeError：无法设置只有 getter 的 [object Object] 的属性堆栈 TypeError：无法设置在 assignAll 处只有 getter 的 [object Object] 的属性堆栈（http://localhost:3000 /node_modules/zone.js/dist/zone.js:704:29）在 ViewWrappedError.ZoneAwareError （http://localhost:3000/node_modules/zone.js/dist/zone.js:775:16）在 ViewWrappedError.BaseError [作为构造函数] ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1104:38 ) 在 ViewWrappedError.WrappedError [作为构造函数] ( http://localhost:3000/node_modules /@angular/core/bundles/core.umd.js:1133:20）在新的 ViewWrappedError （http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5106:20）在_View_HomeComponent_Host0.DebugAppView._rethrowWithContext（http://localhost:3000/node_modules/@angular/core/bundles /core.umd.js:9427:27 ) 在 _View_HomeComponent_Host0.DebugAppView.detectChanges ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9413:22 ) 在 ViewRef_.detectChanges ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7398:24）在RouterOutlet.activate（http://localhost:3000/node_modules/@angular/router/bundles/router .umd.js:3458:46 ) 在 ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20 ) 在 ActivateRoutes.activateRoutes ( http://localhost:3000/node_modules/@angular/router/bundles/router .umd.js:2933:26 ) at eval ( http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23 ) at Array.forEach (native) at ActivateRoutes.activateChildRoutes ( http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2901:33 ) 在 ActivateRoutes.activate ( http://localhost:3000/node_modules/@angular/router/bundles/路由器.umd.js:2896:18 )

在互联网上挖掘后，我意识到这不是真正的错误。我在互联网上找到了一些建议以找到真正的错误，而我发现的真正错误是：

“TypeError：Chart.controllers[meta.type] 不是 Chart.Controller 的构造函数。( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8508:24 ) 在 Object. helpers.each ( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:9345:15 ) 在 Chart.Controller.buildOrUpdateControllers ( http://localhost:3000/node_modules/chart.js /dist/Chart.bundle.js:8497:12 ) 在 Chart.Controller.initialize ( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8356:7 ) 在新图表。新图表 ( http://localhost:3000/node_modules/chart.js/dist/Chart 的控制器 ( http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8339:6 )。 bundle.js:10684:21) 在 BaseChartDirective.getChartBuilder ( http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:73:16 ) 在 BaseChartDirective.refresh ( http://localhost:3000/node_modules/ng2-charts /components/charts/charts.js:114:27 ) 在 BaseChartDirective.ngOnInit ( http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:18:18 ) 在 Wrapper_BaseChartDirective.detectChangesInInputProps (/ ChartsModule/BaseChartDirective/wrapper.ngfactory.js:89:53) 在 _View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:74:32) 在 _View_HomeComponent0.AppView.detectChanges ( http://localhost:3000/node_modules /@angular/core/bundles/core.umd.js:9305:18) 在 _View_HomeComponent0.DebugAppView.detectChanges ( http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48 ) 在 _View_HomeComponent_Host0.AppView.detectViewChildrenChanges ( http://localhost:3000/ node_modules/@angular/core/bundles/core.umd.js:9331:23 ) 在 _View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:33:8)"

我不知道从这里去哪里。我在 ng2-charts gihub repo 上发布了问题。我被困住了，我将非常感谢您的帮助。

4

1 回答 1

0

我在互联网上做了一些研究并阅读了文档。我找不到我的问题的明确答案。以下过程对我有用：

  1. 我将 chart.js 从 2.4.0 降级到 2.3.0
  2. 我将布尔值添加到我的组件中，以指示是否从 RESTApi 接收到数据。我使用该标志使用 *ngIf 显示画布。

HTML 标记如下所示：

<canvas 
            baseChart 
            class="chart"
            [data]="data.pieChartData"
            [labels]="data.pieChartLabels"
            [chartType]="data.pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            *ngIf="isDataAvailable"
            >
    </canvas>
于 2017-01-17T10:09:18.453 回答