Я изучаю, как работают графики в <code>DevExtreme</code> с использованием <code>Angular 17</code>. В качестве первого шага я создал простой пример графика, который отображает список телефонов и количество их продаж за определённый год. Вот список: <br/> <br/> <pre><code class="javascript">public getPhonesData(): ChartDataItem[] {
return [
{ name: "iPhone 14", count: 5000 },
{ name: "iPhone 14 Pro", count: 5200 },
{ name: "iPhone SE (2023)", count: 3000 },
{ name: "Samsung Galaxy S23", count: 4500 },
{ name: "Samsung Galaxy S23 Ultra", count: 4800 },
{ name: "Samsung Galaxy A54", count: 4000 },
{ name: "Google Pixel 7", count: 3200 },
{ name: "Google Pixel 7 Pro", count: 3500 },
{ name: "Xiaomi Mi 13", count: 2700 },
{ name: "Xiaomi Mi 13 Pro", count: 2900 },
{ name: "OnePlus 11", count: 2100 },
{ name: "Sony Xperia 1 V", count: 1800 },
{ name: "Sony Xperia 5 V", count: 1600 },
{ name: "Huawei P60 Pro", count: 1500 },
{ name: "Oppo Find X6", count: 1300 },
{ name: "Realme GT 3", count: 1200 },
{ name: "Motorola Edge 40", count: 1100 },
{ name: "Asus ROG Phone 7", count: 900 },
{ name: "Nokia G22", count: 800 }
];
}</code></pre> <br/> Компонент для графика: <br/> <br/> <pre><code class="javascript">@Component({
selector: 'app-charts',
standalone: true,
imports: [CommonModule,
DxChartModule],
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.css']
})
export class ChartsComponent {
constructor(private source: ChartDataSources) {
this.phones = source.getPhonesData();
}
}</code></pre>
Чтобы отобразить сложный объект на графике с помощью DevExtreme в Angular 17, вы можете использовать компонент `DxChart`. Ваша задача будет заключаться в настройке данных и конфигурации графика для правильного отображения.
Для начала, давайте расширим ваш код, добавив HTML-шаблон для графика и необходимые параметры конфигурации для `DxChart`.
### Шаг 1: Обновите ваш компонент
Убедитесь, что объект данных правильно настроен для графика. Можно использовать свойство `name` для отображения названий телефонов, а `count` — для количества продаж.
В вашем компоненте `ChartsComponent` у вас уже есть метод для получения данных. Убедитесь, что данные получаются правильно.
### Шаг 2: Подготовьте HTML-шаблон
Создайте или откройте файл `charts.component.html` и добавьте следующий код для создания графика:
```html
<dx-chart
[dataSource]="phones"
title="Продажи смартфонов за 2023 год"
idField="name">
<dxi-series argumentField="name" valueField="count" name="Количество продаж">
</dxi-series>
<dxi-label format="fixedPoint" precision="0"></dxi-label>
<dxi-value-axis>
<dxi-label format="fixedPoint" precision="0"></dxi-label>
</dxi-value-axis>
<dxi-argument-axis>
<dxi-label font="{'size': 10}"></dxi-label>
</dxi-argument-axis>
</dx-chart>
```
### Шаг 3: Настройка стилей (по желанию)
Вы можете дополнительно настроить CSS в файле `charts.component.css`, например, задать размеры графика:
```css
dx-chart {
width: 100%;
height: 400px;
}
```
### Шаг 4: Импорт необходимых модулей
Убедитесь, что вы импортировали все необходимые модули в ваш модуль (например, `AppModule` или другой модуль):
```typescript
import { DxChartModule } from 'devextreme-angular';
@NgModule({
declarations: [
ChartsComponent
// другие компоненты
],
imports: [
// другие модули
DxChartModule
]
})
export class AppModule { }
```
### Завершение
С помощью этого кода вы должны увидеть график, отображающий продажи смартфонов в зависимости от названия устройства. При необходимости вы можете настроить более сложные элементы графика, такие как легенды, размеры, цвета, анимации и другие параметры, основываясь на документации DevExtreme.
Теперь, запустив ваше приложение, вы должны увидеть график, отображающий данные о продажах, которые вы предоставили в методе `getPhonesData()`.
Надо найти в документации пример нужного вам графика, посмотреть, в каком виде следует подавать в него данные, привести свои данные к этому виду. Всё.