Abdelrahman Mostafa10 نشر 4 ديسمبر 2023 أرسل تقرير مشاركة نشر 4 ديسمبر 2023 أقوم بدمج الرسوم البيانية باستخدام react-chartjs-2 وأرغب في رسم خط في أسفل الرسم البياني مثل شريط التقدم عندما يزيد السجل. useEffect(() => { const chartData = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [ { label: 'Temperature', data: [20, 22, 25, 24, 26, 28, 30], borderColor: 'rgba(54, 162, 235, 1)', tension: 0.1, }, ], }; const chartOptions = { scales: { yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, }; const createGradientLineAnnotation = (chart) => { const ctx = chart.ctx; const xAxis = chart.scales['x-axis-0']; const yAxis = chart.scales['y-axis-0']; const bottomLineY = yAxis.bottom; const gradient = ctx.createLinearGradient(0, bottomLineY - 10, 0, bottomLineY); gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // Red gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)'); // Green gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // Blue const annotation = { type: 'line', mode: 'horizontal', scaleID: 'y-axis-0', value: bottomLineY, borderColor: gradient, borderWidth: 10, }; chart.annotation.elements.push(annotation); }; const ctx = document.getElementById('myChart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: chartData, options: chartOptions, plugins: [createGradientLineAnnotation], }); return () => { chart.destroy(); }; }, []); return ( <> <div style={{ height: "100vh" }}> <div style={{ width: "50%", margin: "auto" }}> <Line data={data} /> </div> <div style={{ width: "50%", margin: "auto", position: "relative" }}> <canvas id="myChart" /> <div style={{ position: 'absolute', bottom: '30', left: "27", width: '70%', borderBottom: '2px solid black', }} ></div> </div> </div> </> ) اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmed Elmrsawy نشر 5 ديسمبر 2023 أرسل تقرير مشاركة نشر 5 ديسمبر 2023 السلام عليكم بما أن حضرتك تستخدم react-chartjs-2 ف هناك component موجود فيها خاص بالprogress bar و هذا مثال على عمل الcomponent و جعلة جاهز للاستخدام import { Bar } from "react-chartjs-2"; export default function ProgressBar({ data, options }) { return <Bar options={options} data={data} />; } و بعد أن تقوم بانشاء ذلك الcomponent فقم باستخدامة في الملف الذي قمت بإدراجة في المكان الذي تريدة على هذا النحو let data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [ { label: 'Temperature', data: [20, 22, 25, 24, 26, 28, 30], borderColor: 'rgba(54, 162, 235, 1)', tension: 0.1, }, ], }; useEffect(() => { const chartData = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [ { label: 'Temperature', data: [20, 22, 25, 24, 26, 28, 30], borderColor: 'rgba(54, 162, 235, 1)', tension: 0.1, }, ], }; const chartOptions = { scales: { yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, }; const createGradientLineAnnotation = (chart) => { const ctx = chart.ctx; const xAxis = chart.scales['x-axis-0']; const yAxis = chart.scales['y-axis-0']; const bottomLineY = yAxis.bottom; const gradient = ctx.createLinearGradient(0, bottomLineY - 10, 0, bottomLineY); gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // Red gradient.addColorStop(0.5, 'rgba(0, 255, 0, 1)'); // Green gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // Blue const annotation = { type: 'line', mode: 'horizontal', scaleID: 'y-axis-0', value: bottomLineY, borderColor: gradient, borderWidth: 10, }; chart.annotation.elements.push(annotation); }; const ctx = document.getElementById('myChart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: chartData, options: chartOptions, plugins: [createGradientLineAnnotation], }); return () => { chart.destroy(); }; }, []); return ( <> <div style={{ height: "100vh" }}> <div style={{ width: "50%", margin: "auto" }}> <Line data={data} /> </div> <div style={{ width: "50%", margin: "auto", position: "relative" }}> <canvas id="myChart" /> <div style={{ position: 'absolute', bottom: '30', left: "27", width: '70%', borderBottom: '2px solid black', }} > <Bar data={data} /> </div> </div> </div> </> ) مع ملاحظة أنني قمت بنقل المتغير data ليكون global حتى يمكن التعرف علية من أي مكان في الكود اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Abdelrahman Mostafa10
أقوم بدمج الرسوم البيانية باستخدام react-chartjs-2 وأرغب في رسم خط في أسفل الرسم البياني مثل شريط التقدم عندما يزيد السجل.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.