有没有人为RadPieChart提供本机脚本+ angular的示例?

时间:2019-04-30 09:15:20

标签: angular typescript nativescript nativescript-angular

我正在创建一个跨平台的应用程序,该应用程序必须在我的主选项卡上显示PieChart。在哪里可以找到完整的示例?

我尝试遵循this tutorial根据所使用的版本进行更改,但无法正常工作,我认为第一部分与第二部分不匹配。

这是 home.component.html

的一部分
<RadPieChart id="pieChartGiacenze" allowAnimation="true">
            <RadPieChart.series>
              <DonutSeries
                  selectionMode="DataPoint"
                  expandRadius="0.4"
                  outerRadiusFactor="0.7"
                  innerRadiusFactor="0.4"
                  valueProperty="Amount"
                  legendLabel="Brand"
                  [items]="pieSource">
              </DonutSeries>
            </RadPieChart.series>
            <RadPieChart.legend>
              <RadLegendView position="Right" offsetOrigin="TopRight" width="110" enableSelection="true"></RadLegendView>
            </RadPieChart.legend>
          </RadPieChart>

,这是 home.component.ts

的一部分
public pieSource;

//.....somecode.....

this.pieSource = new ObservableArray();
      this.pieSource.push({Brand:"ciao", Amount:50});
      this.pieSource.push({Brand:"mondo", Amount:80});

我在家中看不到图表。我在哪里错了?

1 个答案:

答案 0 :(得分:0)

这是示例,位于.html文件中

<GridLayout height="500" rows="auto,*">
                <Label text="Test Pie Chart" row="0"></Label>
                <RadPieChart allowAnimation="true" row="1">
                    <PieSeries tkPieSeries selectionMode="DataPoint"
                        expandRadius="0.4" outerRadiusFactor="0.7" [items]="pieSource"
                        valueProperty="Amount" legendLabel="Brand"></PieSeries>
                    <RadLegendView tkPieLegend position="Right" offsetOrigin="Bottom"
                        width="100" enableSelection="true" offsetOrigin="TopRight"></RadLegendView>
                </RadPieChart>
            </GridLayout>

和您的.ts文件中

pieSource: { Brand: string, Amount: number }[] = [
        { Brand: "Audi", Amount: 10 },
        { Brand: "Mercedes", Amount: 76 },
        { Brand: "Fiat", Amount: 60 },
        { Brand: "BMW", Amount: 24 },
        { Brand: "Crysler", Amount: 40 }
    ];

这是给您的playground