Question

我是Nativescript开发的新手，我试图在我的应用程序中使用Nativescript-ui-chart，但是当我加载我编写的页面时，屏幕变成空白，什么也不显示。

我遵循了本指南https://docs.nativescript.org/angular/ui/professional-ui-components/ng-Chart/getting-started。我还从Git-Hub下载并测试了示例代码，它可以工作：但是当我复制代码时，它会执行我之前说过的同样的事情。

在这一点上，我认为这与我使用的库有关，也许与图表不兼容

我使用了我在上面发布的链接中找到的相同代码...

<RadCartesianChart>
   <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
   <LinearAxis tkCartesianVerticalAxis></LinearAxis>
   <LineSeries tkCartesianSeries [items]="categoricalSource" 
               categoryProperty="Country" valueProperty="Amount">
   </LineSeries>
</RadCartesianChart>

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 }
    ];


  }
}


@Component({
  selector: "ns-service-detail",
  templateUrl: "./service-detail.component.html",
  styleUrls: ["./service-detail.component.scss"],
  moduleId: module.id,
  providers: [DataService],
})
export class ServiceDetailComponent {

  ngOnInit() {

      this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());

  }

  private _categoricalSource: ObservableArray<Country>;



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

}


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

在控制台日志中，我看不到任何错误，因此调试起来很困难。

Answer 1

我创建了一个游乐场here。您应该将图表包装在布局中。

<GridLayout rows="*" height="1000px">
                <RadCartesianChart row="0">
                    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
                    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
                    <LineSeries tkCartesianSeries [items]="categoricalSource"
                        categoryProperty="Country" valueProperty="Amount"></LineSeries>
                </RadCartesianChart>
            </GridLayout>

RadCartesianChart黑屏

1 个答案: