Для создания и отображения графика в приложении React можно использовать библиотеку для визуализации данных, такую как Chart.js или Recharts.
Пример реализации использования Chart.js для отображения графика в React:
1. Установите библиотеку Chart.js:
```
npm install chart.js
```
2. Создайте компонент Graph.js:
```jsx
import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js';
const Graph = ({ data }) => {
const chartRef = useRef();
useEffect(() => {
const ctx = chartRef.current.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: data.map((_, i) => i + 1),
datasets: [{
label: 'Trajectory',
data: data,
borderColor: 'blue',
backgroundColor: 'transparent'
}]
}
});
}, [data]);
return <canvas ref={chartRef} />;
};
export default Graph;
```
3. Используйте компонент Graph в вашем приложении:
```jsx
import React from 'react';
import Graph from './Graph';
const App = () => {
const trajectoryData = [/* Ваши данные о траектории */];
return (
<div>
<h1>График траектории полета</h1>
<Graph data={trajectoryData} />
</div>
);
};
export default App;
```
Чтобы отобразить координаты x и y на графике траектории полета без использования бэкенда, вам необходимо сначала вычислить запланированные координаты и передать их в компонент Graph в качестве данных (data). Можно использовать математические функции или алгоритмы для расчета траектории и передать полученные данные в компонент Graph для отображения на графике.