Question

我的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");
                                    }
                                );
    }
}

我首先得到的错误的堆栈tress如下：

EXCEPTION：Uncaught（在promise中）：TypeError：无法设置属性堆栈只有一个getter的[object Object] TypeError：无法设置 [object Object]的属性堆栈，它只有一个getter 在assignAll（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） at _View_HomeComponent_Host0.DebugAppView._rethrowWithContext（http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9427:27） at _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）在eval（http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23） at Array.forEach（native）在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/router.umd.js:2896:18）

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

＆＃34; TypeError：Chart.controllers [meta.type]不是构造函数在Chart.Controller。（http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8508:24） at 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）在新的Chart.Controller（http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8339:6）在新图表（http://localhost:3000/node_modules/chart.js/dist/Chart.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） at _View_HomeComponent0.detectChangesInternal（/AppModule/HomeComponent/component.ngfactory.js:74:32） at _View_HomeComponent0.AppView.detectChanges（http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18） at _View_HomeComponent0.DebugAppView.detectChanges（http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48） at _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）＆＃34;

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

Answer 1

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

我将chart.js从2.4.0降级到2.3.0
我在组件中添加了布尔值，表示是否从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>

在HTTP响应中收到数据后，无法将数据分配到ng2饼图

1 个答案: