Nativescript

Question

我遵循nativescript-ui-samples-angular https://github.com/NativeScript/nativescript-ui-samples-angular 并且可以在运行应用程序时查看图表。当我在我的应用程序中使用相同的代码时，IOS 和 Android 上没有显示图表。我不知道出了什么问题。我会错过一些配置吗？谢谢

chart.component.html

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis lastLabelVisibility="Hidden" ios:firstLabelVisibility="Hidden"
        ios:plotMode="OnTicks">
    </CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <AreaSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount">
    </AreaSeries>
</RadCartesianChart>

chart.component.ts

import { Component,ElementRef, ViewChildren, QueryList, OnInit } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataService } from "./data.service";
import { Country } from "./country";

@Component({
    selector: "ns-charts",
    moduleId: module.id,
    templateUrl: "./chart.component.html",
    styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;

    constructor(private _dataService: DataService) { }

    get categoricalSource(): ObservableArray<Country> {
        return this._categoricalSource;
    }

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
        console.log(this._categoricalSource);
    }
}

country.ts

export class Country {
    constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {
    }
}

data.service.ts


import { Country } from "./country";
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {

    getCategoricalSource(): Country[] {
        return [
            { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
            { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
            { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
            { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
            { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
        ];
    }
}

应用-routing.module.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { ChartComponent } from "./chart/chart.component";

const routes: Routes = [
    { path: "", redirectTo: "/charts", pathMatch: "full" },
    { path: "charts", component: ChartComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

package.json

{
  "nativescript": {
    "id": "org.nativescript.boardgamehelper",
    "tns-android": {
      "version": "6.0.1"
    },
    "tns-ios": {
      "version": "6.0.1"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/http": "~8.0.0-beta.10",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "nativescript-angular": "~8.0.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-chart": "^5.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.5.0",
    "tns-core-modules": "6.0.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.0.0",
    "@ngtools/webpack": "~8.0.0",
    "nativescript-dev-webpack": "~1.0.0",
    "typescript": "3.4.5"
  },
  "gitHead": "8c1a4866a66daab09bf5ef8e5a96472687192373",
  "readme": "NativeScript Application"
}

Answer 1

您必须在 module.ts 中导入图表模块，例如

import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";

Nativescript - 图表未显示

Nativescript - Chart is not displaying

nativescript-angular