如何在 Nativescript 中使用 Chart UI
How to use Chart UI in Nativescript
我是 Nativescript 的新手,目前正在使用 Angular 和 Typescript 进行一个小型测试项目。目前我正在使用图表选项,并使用 'tns plugin add nativescript-ui-chart' 命令安装了 Nativescript-ui-chart。我可以将应用程序下载到 运行,但只显示空白 space。
我的 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 { }
您的布局似乎有问题。尝试将 StackLayout 更改为 GridLayout 或同时提供相同的高度和宽度。我已经为您创建了一个示例游乐场 here。
<GridLayout>
<RadCartesianChart>
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<BarSeries tkCartesianSeries [items]="downloads" categoryProperty="month"
valueProperty="downloads"></BarSeries>
</RadCartesianChart>
</GridLayout>
我是 Nativescript 的新手,目前正在使用 Angular 和 Typescript 进行一个小型测试项目。目前我正在使用图表选项,并使用 'tns plugin add nativescript-ui-chart' 命令安装了 Nativescript-ui-chart。我可以将应用程序下载到 运行,但只显示空白 space。
我的 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 { }
您的布局似乎有问题。尝试将 StackLayout 更改为 GridLayout 或同时提供相同的高度和宽度。我已经为您创建了一个示例游乐场 here。
<GridLayout>
<RadCartesianChart>
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<BarSeries tkCartesianSeries [items]="downloads" categoryProperty="month"
valueProperty="downloads"></BarSeries>
</RadCartesianChart>
</GridLayout>