Summarize this content to 400 words in Persian Lang
این ادامه قسمت 1 مجموعه وبلاگ ما است. بهتر است قسمت 1 را بخوانید تا بفهمید چگونه به این مرحله رسیدیم.
طرح کلی آموزش
برای مرجع، در اینجا طرح کلی این مجموعه وبلاگ آمده است:
در این، ما یاد می گیریم که چگونه داده های مالی را که در قسمت قبل با آنها سروکار داشتیم با استفاده از Chart.js تجسم کنیم. ما می خواهیم داده های مالی خود را با استفاده از نمودار میله ای و نمودار دایره ای مشاهده کنیم.
مقدمه ای بر تجسم داده ها
چرا تجسم داده های مالی مهم است؟تجسم داده های مالی به چند دلیل ضروری است مانند:
وضوح را ارائه می دهد. هنگامی که پیچیده است، ما به صورت بصری با استفاده از نمودارها و نمودارها نمایش می دهیم که درک آن را نسبت به متن ساده آسان تر می کند.
این به ردیابی اهداف مالی و نظارت بر پیشرفت در طول زمان کمک می کند. آنها دید واضحی از بودجه، درآمد، هزینه ها و سلامت مالی کلی ارائه می دهند.
تجسم به شناسایی روندهای درآمد و هزینه کمک می کند، که می تواند به شما در تصمیم گیری آگاهانه در مورد امور مالی کمک کند.
نمای کلی Chart.js
Chart.js یک کتابخانه جاوا اسکریپت منبع باز انعطاف پذیر و با کاربری آسان برای ایجاد نمودارها و نمودارها است. استفاده از آن آسان است و یک API ساده برای ایجاد انواع مختلف نمودارها با چند خط کد ارائه می دهد.
Chart.js گزینه‌های سفارشی‌سازی را ارائه می‌دهد و به کاربران اجازه می‌دهد تا نمودارها را برای برآورده کردن نیازهای خاص خود سبک کنند. همچنین دارای پشتیبانی داخلی از انیمیشن ها می باشد.
Chart.js را در پروژه Next.js نصب کنید
برای تجسم داده های بودجه برنامه خود، از دو نمودار (نمودار میله ای و نمودار دایره ای) استفاده می کنیم.
برای شروع، بیایید کتابخانه Chart.js را با استفاده از این دستور نصب کنیم:
npm install chart.js
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ما همچنین نصب خواهیم کرد chartjs-plugin-datalabels افزونه این افزونه به ما اجازه می‌دهد برچسب‌های سفارشی را در داخل یا خارج عناصر نمودار نمایش دهیم، مانند برش‌های پای. ما از آن به طور خاص برای نمودار دایره ای استفاده خواهیم کرد.
npm install chartjs-plugin-datalabels
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
از آنجایی که از دو نمودار استفاده خواهیم کرد، بیایید دو جزء برای نمودارهای داخل خود ایجاد کنیم budget پوشه، واقع در داخل dashboard پوشه ما آنها را نام می بریم – BarChart.tsx و PieChart.tsx.
را آماده کنید Overview.tsx مؤلفه برای دریافت داده های نمودار
اگر به خاطر بیاورید، یا بتوانید به قسمت 1 این مجموعه مراجعه کنید، خواهید دید که چگونه Overview جزء ساختار یافته است. برای اجرای این ویژگی تجسم باید چند چیز اضافه کنیم.
بیایید خودمان را اصلاح کنیم Overview جزء برای واکشی داده های بودجه از Strapi CMS و نمایش نمودارها.در اینجا این است که چگونه این کار را انجام خواهیم داد:
ابتدا قلاب هایی را که استفاده می کنیم وارد می کنیم. ما کتابخانه Axios و سپس دو مؤلفه جدید ایجاد شده را در مؤلفه Overview.tsx خود وارد می کنیم.
“use client”;
import React, { useState, useEffect } from “react”;
import axios from “axios”;
import BarChart from “./budget/BarChart”;
import PieChart from “./budget/PieChart”;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ما حالت هایی را برای ذخیره انواع داده های بودجه و نمودار ایجاد خواهیم کرد. این حالت ها به کاربران امکان می دهد تا بصری نموداری را که می خواهند مشاهده کنند (نمودار میله ای یا نمودار دایره ای) انتخاب کنند که پیش فرض نمودار میله ای است:
const [budgets, setBudgets] = useState{ category: string; amount: number }[]>(
[],
);
const [chartType, setChartType] = useState”bar” | “pie”>(“bar”);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
را اجرا خواهیم کرد useEffect قلاب برای گرفتن دو آرگومان. آرگومان اول تابعی است که به عنوان اثر جانبی و یک آرایه وابستگی خالی اجرا می شود. این آرایه وابستگی فقط یک بار در هنگام نصب کامپوننت اجرا می شود.
useEffect(() => {
…
}, []);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
درون useEffect قلاب، ما ایجاد می کنیم fetchBudgets تابع ناهمزمان برای واکشی داده های بودجه از API. با استفاده از Axios کتابخانه، ما یک GET درخواست به نقطه پایانی API بودجه.
پاسخ res شامل خواهد شد data ویژگی داده های بودجه سپس، ما از آن استفاده خواهیم کرد map روش آرایه برای تکرار بر روی هر آیتم بودجه و ایجاد یک آرایه جدید از اشیاء که فقط شامل ویژگی های دسته و مقدار است.
را setBudgets(data) سپس وضعیت بودجه را با داده های واکشی و نقشه برداری شده به روز می کند.
const fetchBudgets = async () => {
try {
const res = await axios.get(
“http://localhost:1337/api/budgets?populate=budget”,
);
const data = res.data.data.map((budget: any) => ({
category: budget.attributes.category,
amount: budget.attributes.amount,
}));
setBudgets(data);
} catch (error) {
console.error(“Error fetching budgets:”, error);
}
};
fetchBudgets();
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ما تماس خواهیم گرفت fetchBudgets تابع پس از تعریف آن در داخل useEffect قلاب.
پس از آن، دسته بندی و مقدار بودجه را در متغیرها ذخیره می کنیم categories و amounts:
const categories = budgets.map((budget) => budget.category);
const amounts = budgets.map((budget) => budget.amount);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
دسته بندی های بودجه را با نمودار میله ای تجسم کنید
وقت آن است که عملکردهای ایجاد این نمودارها را بنویسیم.
ما به سمت BarChart.tsx جزء.
ما ابتدا قلاب های لازم را وارد می کنیم chart.js کتابخانه ما استفاده خواهیم کرد auto بسته برای اطمینان از تمام ویژگی ها از chart.js در دسترس هستند.
import React, { useEffect, useRef } from “react”;
import Chart from “chart.js/auto”;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
ما یک رابط برای اجزای مورد انتظار کامپوننت – آرایه‌ها برای تعریف می‌کنیم categories و amounts.
interface BarChartProps {
categories: string[];
amounts: number[];
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
را BarChart جزء خواهد گرفت categories و amounts به عنوان لوازم جانبی یک را ایجاد خواهیم کرد chartRef تابعی برای ارجاع به عنصر canvas، که به زودی برای نشان دادن نمونه Chart.js ایجاد خواهیم کرد.
const BarChart: React.FCBarChartProps> = ({ categories, amounts }) => {
const chartRef = useRefHTMLCanvasElement | null>(null);
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
با استفاده از useEffect هوک، زمانی که کامپوننت مونتاژ می‌شود یا زمانی که مقوله‌ها و مقادیر مقادیر تغییر می‌کنند، نمودار را ایجاد می‌کنیم:
useEffect(() => {
if (chartRef.current) {
const chartInstance = new Chart(chartRef.current, {
type: “bar”,
data: {
labels: categories,
datasets: [
{
label: “Budget Amount”,
data: amounts,
backgroundColor: [
“rgba(75, 192, 192, 0.2)”,
“rgba(54, 162, 235, 0.2)”,
“rgba(153, 102, 255, 0.2)”,
],
borderColor: [
“rgb(75, 192, 192)”,
“rgb(54, 162, 235)”,
“rgb(153, 102, 255)”,
],
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
plugins: {
title: {
display: true,
text: “Budget data – bar chart”,
padding: {
top: 10,
bottom: 30,
},
},
},
},
});
return () => {
chartInstance.destroy();
};
}
}, [categories, amounts]);
return canvas ref={chartRef} />;
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در useEffect تابع بالا را اضافه کردیم if (chartRef.current) برای اطمینان از اینکه نمودار تنها در صورتی ایجاد می شود که عنصر بوم در دسترس باشد.
را new Chart(chartRef.current, { … }) یک نمونه Chart.js جدید با نوع، داده ها و گزینه های مشخص شده ایجاد می کند.
type: ‘bar’ مشخص می کند که نمودار یک نمودار میله ای است.
را data شی شامل برچسب های نمودار (categories) و مجموعه داده ها (amounts) از جمله رنگ برچسب، داده و نوار.
را options شی گزینه های پیکربندی برای نمودار است، مانند شروع کردن محور y از صفر. را plugins شیء داخل «گزینه ها» دارای خاصیت تنظیم عنوان برای نمودار است.
را return () => { chartInstance.destroy(); } بیانیه نمونه نمودار را هنگامی که مؤلفه جدا می شود یا به روز می شود، پاک می کند.
در نهایت، یک عنصر بوم را با a رندر می کند ref برای پیوست کردن نمونه Chart.js.
مقوله های بودجه را با نمودار دایره ای تجسم کنید
برای نمودار دایره ای خود، می خواهیم درصدی را که هر دسته بودجه می گیرد، مشاهده کنیم، به عنوان مثال، 20٪ برای پس انداز، 40٪ برای غذا و غیره.
ما به سمت PieChart.tsx جزء و به روز رسانی های زیر را انجام دهید.
شبیه به BarChart جزء، ما با وارد کردن قلاب ها و وابستگی های لازم شروع می کنیم:javascriptimport React, { useEffect, useRef } from ‘react’;import Chart from ‘chart.js/auto’;import ChartDataLabels from ‘chartjs-plugin-datalabels’;
We’ll include this method from the chartjs-plugin-datalabels افزونه:javascriptChart.register(ChartDataLabels);
We’ll then define the interface for the props expected by the component – arrays for categories و amounts.javascriptinterface PieChartProps {categories: string[];amounts: number[];}
Next, we’ll define the PieChart جزء. طول خواهد کشید categories و amounts به عنوان لوازم جانبی سپس، ما را تعریف می کنیم chartRef: Ref تابع برای ارجاع عنصر بوم.javascriptconst PieChart: React.FC = ({ categories, amounts }) => {const chartRef = useRef(null);
Next, we initialize the chart inside a useEffect اینجوری قلاب کن:`javascriptuseEffect(() => {if (chartRef.current) {const totalAmount = amounts.reduce((acc, amount) => acc + amount, 0);
const chartInstance = new Chart(chartRef.current, {type: “pie”,data: {labels: categories,datasets: [{label: “Budget Amount”,data: amounts,backgroundColor: [“rgba(255, 99, 132, 0.6)”,”rgba(54, 162, 235, 0.6)”,”rgba(255, 206, 86, 0.6)”,”rgba(75, 192, 192, 0.6)”,”rgba(153, 102, 255, 0.6)”,”rgba(255, 159, 64, 0.6)”,],borderColor: [“rgba(255, 99, 132, 1)”,”rgba(54, 162, 235, 1)”,”rgba(255, 206, 86, 1)”,”rgba(75, 192, 192, 1)”,”rgba(153, 102, 255, 1)”,”rgba(255, 159, 64, 1)”,],borderWidth: 1,},],},options: {responsive: true,maintainAspectRatio: false,plugins: {title: {display: true,text: “Budget data – pie chart”,padding: {top: 10,bottom: 30,},},datalabels: {color: “white”,formatter: (value, context) => {const percentage = ((value / totalAmount) * 100).toFixed(2);return ${percentage}%;}،}،}،}،})؛
بازگشت () => {chartInstance.destroy();};}}، [categories, amounts])`
We initialized the useEffect قلاب و اضافه کرد totalAmount تابع برای محاسبه درصد هر دسته در مقایسه با دسته های دیگر.
درست مانند نمودار میله ای، type: ‘pie’ مشخص می کند که نمودار یک نمودار دایره ای است.
را backgroundColor و borderColor آرایه ها رنگ ها را برای بخش های نمودار دایره ای مشخص می کنند.
را options: { responsive: true } شیء نمودار دایره ای را پاسخگو می کند. ما اضافه کردیم maintainAspectRatio: false در شی گزینه ها برای اطمینان از اینکه نمودار نسبت ابعاد پیش فرض را حفظ نمی کند و می تواند به اندازه ظرف خود مقیاس شود.
توجه داشته باشید: اندازه پیش فرض می تواند بسیار بزرگ باشد و فضای زیادی را در صفحه شما اشغال کند، بنابراین می توانید عرض و ارتفاع را برای کاهش اندازه نمودار دایره ای تنظیم کنید.
را title ملک در داخل plugins شیء نمایش عنوان را بر روی true, که عنوان نمودار را نمایش می دهد.
را datalabels شی حاوی مقادیر درصدی هر دسته است و رنگ متن درصد را سفید تنظیم می کند.
عنصر بوم را با پیچیدن عنصر بوم در a برگرداندیم div عنصر با سبک های عرض و ارتفاع خاص.ما به عنصر canvas صفت عرض و ارتفاع دادیم تا عرض و ارتفاع آن را تنظیم کنیم.
javascriptreturn (
ref={chartRef}width=”700″height=”700″aria-label=”Hello ARIA World”role=”img”/>);
You can adjust your chart size any way you want it to look.
Render the Pie and Bar Charts in the Overview Page
We’ve modified the overview page by preparing it for the charts and writing the code. Now, we need to display the charts on the overview page.
In the JSX of our Overview.tsx جزء، ما UI را ارائه می دهیم:
html
OVERVIEW
onClick={() => setChartType(“bar”)}className={mx-2 py-2 px-3 ${chartType === “bar” ? “bg-teal-500 text-white” : “bg-gray-200 text-gray-700”} rounded-lg}>Bar Chart
onClick={() => setChartType(“pie”)}className={mx-2 py-2 px-3 ${chartType === “پای” ? “bg-teal-500 text-white” : “bg-gray-200 text-grey-700”} rounded-lg}>Pie Chart
{chartType === “نوار” ? () : ()}
;
We created a div عنصر با دو دکمه هر دکمه دارای یک onClick کنترل کننده ای که نوع نمودار را روی “bar” یا “pie” تنظیم می کند.دکمه ها بر اساس جریان طراحی شده اند chartType حالت، نشان دهنده نوع مورد نظر ما برای نمایش است.
سپس صفحه به صورت مشروط هر دو را ارائه می کند BarChart یا PieChart جزء بر اساس مقدار فعلی chartType.
اگر chartType است ‘bar’، BarChart جزء ارائه شده است. اگر chartType است ‘pie’، PieChart جزء ارائه شده است.هر دو جزء دریافت می کنند categories و amounts به عنوان پایه برای نمایش داده ها.
اکنون نمودارهای ما آماده است.
در اینجا نمودار میله ای ما باید به شکل زیر باشد:
در اینجا نمودار دایره ای ما باید چگونه باشد:
اگر یک مورد بودجه را از صفحه بودجه ویرایش کنیم، مانند دسته ای که در آن قرار می گیرد یا مقدار آن، نمودارها مطابق با ارزش بودجه جدید تنظیم می شوند.
اگر بودجه های بیشتری را از طریق صفحه بودجه اضافه کنیم، موارد و مقادیر به صورت پویا به نمودارها اضافه می شوند. رنگ پس زمینه و حاشیه را تغییر دهید و با مقادیر بازی کنید.
انیمیشن را به نمودارها اضافه کنید
بیایید کمی انیمیشن به نمودارهای خود اضافه کنیم.
ابتدا، در نمودار میله ای، ما را اضافه می کنیم easeOutElastic خاصیت انیمیشن
برای انجام این کار، ویژگی دیگری را در قسمت قرار می دهیم options شی نامیده می شود animation. این ویژگی یک شی با دو مقدار خواهد بود – duration و easing.
javascript
animation: {
duration: 6000, // Increase or decrease the duration
easing: ‘easeOutElastic’, // Using the easing function
},
We set the duration to 6000 milliseconds (6 seconds) to make the animation slower and more noticeable. When our visualization loads, the bars elasticate for 6 seconds before setting to their proper position.
In the pie chart, we’ll add a bouncing animation using the easeOutBounce ویژگی.
ما را شامل می کنیم animation ملک در داخل options شی با دو مقدار برای این کار.
javascript
animation: {
duration: 6000,
easing: ‘easeOutBounce’,
},
نسخه ی نمایشی انیمیشن
وقتی صفحه خود را بارگذاری می کنیم، انیمیشن الاستیک نمودار میله ای و انیمیشن پرش بخش های دایره ای را می بینیم.
انیمیشن های بیشتر؟
برای لیست کامل انیمیشن‌ها و انتقال‌هایی که می‌توانید به نمودارها اضافه کنید، سایت مستند chart.js را بررسی کنید.
ما می توانیم از نمودارهای دیگر برای تجسم داده های مالی استفاده کنیم، اما برای این مقاله فقط از نمودارهای میله ای و دایره ای استفاده می کنیم. اگر علاقه مند به کاوش تجسم های بیشتر با Chart.js هستید، انواع نمودارهای دیگر را بررسی کنید.
می توانید این مفهوم را برای تجسم بخش های دیگر برنامه خود اعمال کنید. به عنوان مثال، می توانید هزینه های چند ماهه را تجسم کنید تا ببینید در یک ماه خاص در مقایسه با ماه های دیگر چقدر هزینه کرده اید.
این برای تصمیم گیری های مالی و شناسایی روندها مفید است.
نتیجه
در قسمت 2 این مجموعه آموزشی، مروری بر نمودارها را مرور کردیم، نمودارهای Pie و Bar را در Next.js با استفاده از Chart.js و Strapi CMS تنظیم کردیم، آنها را برای داده ها آماده کردیم، انیمیشن اضافه کردیم و آنها را رندر کردیم.
مخزن GitHub این پروژه به روز شده است تا شامل تجسم داده های مالی باشد.
قسمت آخر (قسمت 3) این مجموعه وبلاگ را تماشا کنید، جایی که ما احراز هویت و یک ویژگی گزارش شخصی را به برنامه ردیاب مالی خود اضافه می کنیم.
این ادامه قسمت 1 مجموعه وبلاگ ما است. بهتر است قسمت 1 را بخوانید تا بفهمید چگونه به این مرحله رسیدیم.
طرح کلی آموزش
برای مرجع، در اینجا طرح کلی این مجموعه وبلاگ آمده است:
در این، ما یاد می گیریم که چگونه داده های مالی را که در قسمت قبل با آنها سروکار داشتیم با استفاده از Chart.js تجسم کنیم. ما می خواهیم داده های مالی خود را با استفاده از نمودار میله ای و نمودار دایره ای مشاهده کنیم.
مقدمه ای بر تجسم داده ها
چرا تجسم داده های مالی مهم است؟
تجسم داده های مالی به چند دلیل ضروری است مانند:
- وضوح را ارائه می دهد. هنگامی که پیچیده است، ما به صورت بصری با استفاده از نمودارها و نمودارها نمایش می دهیم که درک آن را نسبت به متن ساده آسان تر می کند.
- این به ردیابی اهداف مالی و نظارت بر پیشرفت در طول زمان کمک می کند. آنها دید واضحی از بودجه، درآمد، هزینه ها و سلامت مالی کلی ارائه می دهند.
- تجسم به شناسایی روندهای درآمد و هزینه کمک می کند، که می تواند به شما در تصمیم گیری آگاهانه در مورد امور مالی کمک کند.
نمای کلی Chart.js
Chart.js یک کتابخانه جاوا اسکریپت منبع باز انعطاف پذیر و با کاربری آسان برای ایجاد نمودارها و نمودارها است. استفاده از آن آسان است و یک API ساده برای ایجاد انواع مختلف نمودارها با چند خط کد ارائه می دهد.
Chart.js گزینه‌های سفارشی‌سازی را ارائه می‌دهد و به کاربران اجازه می‌دهد تا نمودارها را برای برآورده کردن نیازهای خاص خود سبک کنند. همچنین دارای پشتیبانی داخلی از انیمیشن ها می باشد.
Chart.js را در پروژه Next.js نصب کنید
برای تجسم داده های بودجه برنامه خود، از دو نمودار (نمودار میله ای و نمودار دایره ای) استفاده می کنیم.
- برای شروع، بیایید کتابخانه Chart.js را با استفاده از این دستور نصب کنیم:
npm install chart.js
- ما همچنین نصب خواهیم کرد
chartjs-plugin-datalabelsافزونه این افزونه به ما اجازه می‌دهد برچسب‌های سفارشی را در داخل یا خارج عناصر نمودار نمایش دهیم، مانند برش‌های پای. ما از آن به طور خاص برای نمودار دایره ای استفاده خواهیم کرد.
npm install chartjs-plugin-datalabels
- از آنجایی که از دو نمودار استفاده خواهیم کرد، بیایید دو جزء برای نمودارهای داخل خود ایجاد کنیم
budgetپوشه، واقع در داخلdashboardپوشه ما آنها را نام می بریم –BarChart.tsxوPieChart.tsx.
را آماده کنید Overview.tsx مؤلفه برای دریافت داده های نمودار
اگر به خاطر بیاورید، یا بتوانید به قسمت 1 این مجموعه مراجعه کنید، خواهید دید که چگونه Overview جزء ساختار یافته است. برای اجرای این ویژگی تجسم باید چند چیز اضافه کنیم.
بیایید خودمان را اصلاح کنیم Overview جزء برای واکشی داده های بودجه از Strapi CMS و نمایش نمودارها.
در اینجا این است که چگونه این کار را انجام خواهیم داد:
ابتدا قلاب هایی را که استفاده می کنیم وارد می کنیم. ما کتابخانه Axios و سپس دو مؤلفه جدید ایجاد شده را در مؤلفه Overview.tsx خود وارد می کنیم.
"use client";
import React, { useState, useEffect } from "react";
import axios from "axios";
import BarChart from "./budget/BarChart";
import PieChart from "./budget/PieChart";
- ما حالت هایی را برای ذخیره انواع داده های بودجه و نمودار ایجاد خواهیم کرد. این حالت ها به کاربران امکان می دهد تا بصری نموداری را که می خواهند مشاهده کنند (نمودار میله ای یا نمودار دایره ای) انتخاب کنند که پیش فرض نمودار میله ای است:
const [budgets, setBudgets] = useState{ category: string; amount: number }[]>(
[],
);
const [chartType, setChartType] = useState"bar" | "pie">("bar");
- را اجرا خواهیم کرد
useEffectقلاب برای گرفتن دو آرگومان. آرگومان اول تابعی است که به عنوان اثر جانبی و یک آرایه وابستگی خالی اجرا می شود. این آرایه وابستگی فقط یک بار در هنگام نصب کامپوننت اجرا می شود.
useEffect(() => {
...
}, []);
- درون
useEffectقلاب، ما ایجاد می کنیمfetchBudgetsتابع ناهمزمان برای واکشی داده های بودجه از API. با استفاده ازAxiosکتابخانه، ما یکGETدرخواست به نقطه پایانی API بودجه. - پاسخ
resشامل خواهد شدdataویژگی داده های بودجه سپس، ما از آن استفاده خواهیم کردmapروش آرایه برای تکرار بر روی هر آیتم بودجه و ایجاد یک آرایه جدید از اشیاء که فقط شامل ویژگی های دسته و مقدار است. - را
setBudgets(data)سپس وضعیت بودجه را با داده های واکشی و نقشه برداری شده به روز می کند.
const fetchBudgets = async () => {
try {
const res = await axios.get(
"http://localhost:1337/api/budgets?populate=budget",
);
const data = res.data.data.map((budget: any) => ({
category: budget.attributes.category,
amount: budget.attributes.amount,
}));
setBudgets(data);
} catch (error) {
console.error("Error fetching budgets:", error);
}
};
fetchBudgets();
-
ما تماس خواهیم گرفت
fetchBudgetsتابع پس از تعریف آن در داخلuseEffectقلاب. -
پس از آن، دسته بندی و مقدار بودجه را در متغیرها ذخیره می کنیم
categoriesوamounts:
const categories = budgets.map((budget) => budget.category);
const amounts = budgets.map((budget) => budget.amount);
دسته بندی های بودجه را با نمودار میله ای تجسم کنید
وقت آن است که عملکردهای ایجاد این نمودارها را بنویسیم.
ما به سمت BarChart.tsx جزء.
- ما ابتدا قلاب های لازم را وارد می کنیم
chart.jsکتابخانه ما استفاده خواهیم کردautoبسته برای اطمینان از تمام ویژگی ها ازchart.jsدر دسترس هستند.
import React, { useEffect, useRef } from "react";
import Chart from "chart.js/auto";
- ما یک رابط برای اجزای مورد انتظار کامپوننت – آرایه‌ها برای تعریف می‌کنیم
categoriesوamounts.
interface BarChartProps {
categories: string[];
amounts: number[];
}
- را
BarChartجزء خواهد گرفتcategoriesوamountsبه عنوان لوازم جانبی یک را ایجاد خواهیم کردchartRefتابعی برای ارجاع به عنصر canvas، که به زودی برای نشان دادن نمونه Chart.js ایجاد خواهیم کرد.
const BarChart: React.FCBarChartProps> = ({ categories, amounts }) => {
const chartRef = useRefHTMLCanvasElement | null>(null);
- با استفاده از
useEffectهوک، زمانی که کامپوننت مونتاژ می‌شود یا زمانی که مقوله‌ها و مقادیر مقادیر تغییر می‌کنند، نمودار را ایجاد می‌کنیم:
useEffect(() => {
if (chartRef.current) {
const chartInstance = new Chart(chartRef.current, {
type: "bar",
data: {
labels: categories,
datasets: [
{
label: "Budget Amount",
data: amounts,
backgroundColor: [
"rgba(75, 192, 192, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(153, 102, 255, 0.2)",
],
borderColor: [
"rgb(75, 192, 192)",
"rgb(54, 162, 235)",
"rgb(153, 102, 255)",
],
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
plugins: {
title: {
display: true,
text: "Budget data - bar chart",
padding: {
top: 10,
bottom: 30,
},
},
},
},
});
return () => {
chartInstance.destroy();
};
}
}, [categories, amounts]);
return canvas ref={chartRef} />;
-
در
useEffectتابع بالا را اضافه کردیمif (chartRef.current)برای اطمینان از اینکه نمودار تنها در صورتی ایجاد می شود که عنصر بوم در دسترس باشد. -
را
new Chart(chartRef.current, { ... })یک نمونه Chart.js جدید با نوع، داده ها و گزینه های مشخص شده ایجاد می کند. -
type: 'bar'مشخص می کند که نمودار یک نمودار میله ای است. -
را
dataشی شامل برچسب های نمودار (categories) و مجموعه داده ها (amounts) از جمله رنگ برچسب، داده و نوار. -
را
optionsشی گزینه های پیکربندی برای نمودار است، مانند شروع کردن محور y از صفر. راpluginsشیء داخل «گزینه ها» دارای خاصیت تنظیم عنوان برای نمودار است. -
را
return () => { chartInstance.destroy(); }بیانیه نمونه نمودار را هنگامی که مؤلفه جدا می شود یا به روز می شود، پاک می کند. -
در نهایت،
یک عنصر بوم را با a رندر می کندrefبرای پیوست کردن نمونه Chart.js.
مقوله های بودجه را با نمودار دایره ای تجسم کنید
برای نمودار دایره ای خود، می خواهیم درصدی را که هر دسته بودجه می گیرد، مشاهده کنیم، به عنوان مثال، 20٪ برای پس انداز، 40٪ برای غذا و غیره.
ما به سمت PieChart.tsx جزء و به روز رسانی های زیر را انجام دهید.
-
شبیه به
BarChartجزء، ما با وارد کردن قلاب ها و وابستگی های لازم شروع می کنیم:javascript
import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels'; -
We’ll include this method from the
chartjs-plugin-datalabelsافزونه:javascript
Chart.register(ChartDataLabels); -
We’ll then define the interface for the props expected by the component – arrays for
categoriesوamounts.javascript
interface PieChartProps {
categories: string[];
amounts: number[];
} -
Next, we’ll define the
PieChartجزء. طول خواهد کشیدcategoriesوamountsبه عنوان لوازم جانبی سپس، ما را تعریف می کنیمchartRef: Refتابع برای ارجاع عنصر بوم.javascript
const PieChart: React.FC= ({ categories, amounts }) => {
const chartRef = useRef(null); -
Next, we initialize the chart inside a
useEffectاینجوری قلاب کن:`javascript
useEffect(() => {
if (chartRef.current) {
const totalAmount = amounts.reduce((acc, amount) => acc + amount, 0);const chartInstance = new Chart(chartRef.current, {
type: “pie”,
data: {
labels: categories,
datasets: [
{
label: “Budget Amount”,
data: amounts,
backgroundColor: [
“rgba(255, 99, 132, 0.6)”,
“rgba(54, 162, 235, 0.6)”,
“rgba(255, 206, 86, 0.6)”,
“rgba(75, 192, 192, 0.6)”,
“rgba(153, 102, 255, 0.6)”,
“rgba(255, 159, 64, 0.6)”,
],
borderColor: [
“rgba(255, 99, 132, 1)”,
“rgba(54, 162, 235, 1)”,
“rgba(255, 206, 86, 1)”,
“rgba(75, 192, 192, 1)”,
“rgba(153, 102, 255, 1)”,
“rgba(255, 159, 64, 1)”,
],
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: “Budget data – pie chart”,
padding: {
top: 10,
bottom: 30,
},
},
datalabels: {
color: “white”,
formatter: (value, context) => {
const percentage = ((value / totalAmount) * 100).toFixed(2);
return${percentage}%;
}،
}،
}،
}،
})؛بازگشت () => {
chartInstance.destroy();
};
}
}، [categories, amounts])
` -
We initialized the
useEffectقلاب و اضافه کردtotalAmountتابع برای محاسبه درصد هر دسته در مقایسه با دسته های دیگر. -
درست مانند نمودار میله ای،
type: 'pie'مشخص می کند که نمودار یک نمودار دایره ای است. -
را
backgroundColorوborderColorآرایه ها رنگ ها را برای بخش های نمودار دایره ای مشخص می کنند. -
را
options: { responsive: true }شیء نمودار دایره ای را پاسخگو می کند. ما اضافه کردیمmaintainAspectRatio: falseدر شی گزینه ها برای اطمینان از اینکه نمودار نسبت ابعاد پیش فرض را حفظ نمی کند و می تواند به اندازه ظرف خود مقیاس شود.توجه داشته باشید: اندازه پیش فرض می تواند بسیار بزرگ باشد و فضای زیادی را در صفحه شما اشغال کند، بنابراین می توانید عرض و ارتفاع را برای کاهش اندازه نمودار دایره ای تنظیم کنید.
-
را
titleملک در داخلpluginsشیء نمایش عنوان را بر رویtrue,که عنوان نمودار را نمایش می دهد. -
را
datalabelsشی حاوی مقادیر درصدی هر دسته است و رنگ متن درصد را سفید تنظیم می کند. -
عنصر بوم را با پیچیدن عنصر بوم در a برگرداندیم
divعنصر با سبک های عرض و ارتفاع خاص.
ما به عنصر canvas صفت عرض و ارتفاع دادیم تا عرض و ارتفاع آن را تنظیم کنیم.
javascript
return (
);
You can adjust your chart size any way you want it to look.
Render the Pie and Bar Charts in the Overview Page
We’ve modified the overview page by preparing it for the charts and writing the code. Now, we need to display the charts on the overview page.
In the JSX of our Overview.tsx جزء، ما UI را ارائه می دهیم:
html
OVERVIEW
onClick={() => setChartType("pie")}
className={mx-2 py-2 px-3 ${chartType === "پای" ? "bg-teal-500 text-white" : "bg-gray-200 text-grey-700"} rounded-lg}
>
Pie Chart
) : (
;
-
We created a
divعنصر با دو دکمه هر دکمه دارای یکonClickکنترل کننده ای که نوع نمودار را روی “bar” یا “pie” تنظیم می کند.
دکمه ها بر اساس جریان طراحی شده اندchartTypeحالت، نشان دهنده نوع مورد نظر ما برای نمایش است. -
سپس صفحه به صورت مشروط هر دو را ارائه می کند
BarChartیاPieChartجزء بر اساس مقدار فعلیchartType. -
اگر
chartTypeاست'bar'،BarChartجزء ارائه شده است. اگرchartTypeاست'pie'،PieChartجزء ارائه شده است.
هر دو جزء دریافت می کنندcategoriesوamountsبه عنوان پایه برای نمایش داده ها.
اکنون نمودارهای ما آماده است.
در اینجا نمودار میله ای ما باید به شکل زیر باشد:
در اینجا نمودار دایره ای ما باید چگونه باشد:
اگر یک مورد بودجه را از صفحه بودجه ویرایش کنیم، مانند دسته ای که در آن قرار می گیرد یا مقدار آن، نمودارها مطابق با ارزش بودجه جدید تنظیم می شوند.
اگر بودجه های بیشتری را از طریق صفحه بودجه اضافه کنیم، موارد و مقادیر به صورت پویا به نمودارها اضافه می شوند. رنگ پس زمینه و حاشیه را تغییر دهید و با مقادیر بازی کنید.
انیمیشن را به نمودارها اضافه کنید
بیایید کمی انیمیشن به نمودارهای خود اضافه کنیم.
ابتدا، در نمودار میله ای، ما را اضافه می کنیم easeOutElastic خاصیت انیمیشن
- برای انجام این کار، ویژگی دیگری را در قسمت قرار می دهیم
optionsشی نامیده می شودanimation. این ویژگی یک شی با دو مقدار خواهد بود –durationوeasing.
javascript
animation: {
duration: 6000, // Increase or decrease the duration
easing: 'easeOutElastic', // Using the easing function
},
We set the duration to 6000 milliseconds (6 seconds) to make the animation slower and more noticeable. When our visualization loads, the bars elasticate for 6 seconds before setting to their proper position.
In the pie chart, we’ll add a bouncing animation using the easeOutBounce ویژگی.
- ما را شامل می کنیم
animationملک در داخلoptionsشی با دو مقدار برای این کار.
javascript
animation: {
duration: 6000,
easing: 'easeOutBounce',
},
نسخه ی نمایشی انیمیشن
وقتی صفحه خود را بارگذاری می کنیم، انیمیشن الاستیک نمودار میله ای و انیمیشن پرش بخش های دایره ای را می بینیم.
انیمیشن های بیشتر؟
برای لیست کامل انیمیشن‌ها و انتقال‌هایی که می‌توانید به نمودارها اضافه کنید، سایت مستند chart.js را بررسی کنید.
ما می توانیم از نمودارهای دیگر برای تجسم داده های مالی استفاده کنیم، اما برای این مقاله فقط از نمودارهای میله ای و دایره ای استفاده می کنیم. اگر علاقه مند به کاوش تجسم های بیشتر با Chart.js هستید، انواع نمودارهای دیگر را بررسی کنید.
می توانید این مفهوم را برای تجسم بخش های دیگر برنامه خود اعمال کنید. به عنوان مثال، می توانید هزینه های چند ماهه را تجسم کنید تا ببینید در یک ماه خاص در مقایسه با ماه های دیگر چقدر هزینه کرده اید.
این برای تصمیم گیری های مالی و شناسایی روندها مفید است.
نتیجه
در قسمت 2 این مجموعه آموزشی، مروری بر نمودارها را مرور کردیم، نمودارهای Pie و Bar را در Next.js با استفاده از Chart.js و Strapi CMS تنظیم کردیم، آنها را برای داده ها آماده کردیم، انیمیشن اضافه کردیم و آنها را رندر کردیم.
مخزن GitHub این پروژه به روز شده است تا شامل تجسم داده های مالی باشد.
قسمت آخر (قسمت 3) این مجموعه وبلاگ را تماشا کنید، جایی که ما احراز هویت و یک ویژگی گزارش شخصی را به برنامه ردیاب مالی خود اضافه می کنیم.
