如何在 Nativescript 中使用图表 UI答案

【问题标题】：How to use Chart UI in Nativescript如何在 Nativescript 中使用图表 UI
【发布时间】：2019-05-15 23:18:20
【问题描述】：

我是 Nativescript 的新手，目前正在使用 Angular 和 Typescript 进行一个小型测试项目。目前我正在使用图表选项，并使用“tns plugin add nativescript-ui-chart”命令安装了 Nativescript-ui-chart。我可以让应用程序运行，但只显示空白区域。

我的 HTML 文件：

<ActionBar>
    <NavigationButton title="Main Chart"></NavigationButton>
</ActionBar>

<StackLayout horizontalAlignment="center">

    <RadCartesianChart xmlns:chart="nativescript-ui-chart">
        <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>

        <LineSeries tkCartesianSeries
            [item]="downloads"
            categoryProperty="month"
            valueProperty="downloads"></LineSeries>
    </RadCartesianChart>

</StackLayout>

我的打字稿文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ns-main-chart',
  templateUrl: './main-chart.component.html',
  styleUrls: ['./main-chart.component.css'],
  moduleId: module.id
})
export class MainChartComponent{

    downloads = [
        { month: "Jan1", downloads: 58863 },
        { month: "Jan2", downloads: 10000 },
        { month: "Jan3", downloads: 68863 },
        { month: "Jan4", downloads: 8863 },
        { month: "Jan5", downloads: 88863 },
        { month: "Jan6", downloads: 98863 },
        { month: "Jan7", downloads: 108863 },
        { month: "Jan8", downloads: 28863 }
    ];
}

我添加了从“nativescript-ui-chart/angular”导入{ NativeScriptUIChartModule }；到我的 app.module 文件

我的 app.module 文件：

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppComponent } from "./app.component";
import { AddTaskComponent } from './components/add-task/add-task.component';

import { CreateTaskComponent } from './components/create-task/create-task.component';
import { appComponents, appRoutes } from "./app.routing";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { MainChartComponent } from './components/main-chart/main-chart.component';

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

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule
        NativeScriptUIChartModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    declarations: [
        AppComponent,
        AddTaskComponent,
        CreateTaskComponent,
        MainChartComponent,
        ...appComponents   //imports all pages
    ],
    providers: [],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

【问题讨论】：

你能分享一个可以重现问题的 Playground 示例吗？
另外，如果这是 iOS，那么这是你的布局，因为 iOS 不知道你想要这个布局做什么。在某些 UI 上设置大小，它会呈现良好

标签： angular charts nativescript angular2-nativescript

【解决方案1】：

您的布局似乎有问题。尝试将 StackLayout 更改为 GridLayout 或提供相同的高度和宽度。我为您创建了一个示例 Playground here。

<GridLayout>
    <RadCartesianChart>
        <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
        <BarSeries tkCartesianSeries [items]="downloads" categoryProperty="month"
            valueProperty="downloads"></BarSeries>
    </RadCartesianChart>
</GridLayout>

【讨论】：