69 lines
2.3 KiB
JavaScript
69 lines
2.3 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Line } from 'react-chartjs-2';
|
||
import axios from 'axios';
|
||
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js';
|
||
|
||
// Регистрация компонентов Chart.js
|
||
ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale);
|
||
|
||
const SimpleGraph = () => {
|
||
const [data, setData] = useState([]);
|
||
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
try {
|
||
// Загружаем данные из файла с использованием axios
|
||
const response = await axios.get('/data.json'); // Путь должен быть относительно папки public
|
||
const rawData = response.data;
|
||
|
||
// Проверяем, что данные действительно массив
|
||
if (Array.isArray(rawData)) {
|
||
const chartData = rawData.map(item => ({
|
||
timestamp: item.timestamp,
|
||
value: item.value,
|
||
}));
|
||
|
||
setData(chartData);
|
||
} else {
|
||
throw new Error('Ошибка: Данные не являются массивом.');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching data:', error);
|
||
}
|
||
};
|
||
|
||
fetchData();
|
||
}, []);
|
||
|
||
if (data.length === 0) return <div>Loading...</div>;
|
||
|
||
// Настройки графика
|
||
const chartOptions = {
|
||
responsive: true,
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
text: 'Simple Data Graph',
|
||
},
|
||
},
|
||
};
|
||
|
||
const chartData = {
|
||
labels: data.map(item => item.timestamp), // Массив меток для оси X
|
||
datasets: [
|
||
{
|
||
label: 'Value',
|
||
data: data.map(item => item.value), // Массив значений для оси Y
|
||
borderColor: 'rgb(75, 192, 192)',
|
||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||
fill: false,
|
||
tension: 0.1,
|
||
},
|
||
],
|
||
};
|
||
|
||
return <Line data={chartData} options={chartOptions} />;
|
||
};
|
||
|
||
export default SimpleGraph;
|