У кого-нибудь есть образец RadPieChart для nativescript + angular?
Я создаю кросс-платформенное приложение, которое должно отображать круговую диаграмму на моей домашней вкладке. Где я могу найти полный пример?
Я пытаюсь следовать этот учебник, изменяя его в зависимости от версии, которую я использую, но не работает, и, на мой взгляд, первая часть не соответствует второй части.
Это часть 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
Вот образец в файле .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 }
];
Вот вам игровая площадка.
Это работает, но я не вижу диаграммы, я вижу только легенду. Вы знаете, что это может быть?
Вы импортировали модуль в свой Ngmodule?
Я импортировал NativeScriptUIChartModule
какую платформу и устройство вы тестируете?
Я тестирую приложение на устройстве Android, в частности на Asus ZenFone Z00ED и Samsung Galaxy S7.
Теперь я протестировал приложение на Samsung Galaxy Tab 4 10.1, и оно то же самое, диаграмма не отображается.
Можете ли вы создать игровую площадку с вашим кодом? Может что-то не так с вашим кодом
Это Игровая площадка
Возникла проблема с вашим макетом. Я обновил игровую площадку play.nativescript.org/?template=play-ng&id=QVYErQ&v=2
Спасибо! Оно работает!! У меня еще вопрос, как изменить палитру графика?
Откуда вы взяли этот шаблон? Насколько я помню, профессиональный пользовательский интерфейс нативного скрипта сделан телериком, поэтому вы можете проверить их примеры, например этот: github.com/telerik/nativescript-ui-samples-angular/blob/master/…