کار با chartjs
سلام
دوستان کسی تجربه کار با کتابخانه chart.js داره.چندجا نگاه کردن ی توضیحاتی نوشته ولی هیچ کدوم نتونستم جواب بگیرم
میخام تو لاراول از دیتابس مقدار ها رو بگیرم (مثلا میزان فروش ماه ها به صورت مجزا روی یک چارت نشون بده) روی چارت پیاده کنم.
تو این حالت به صورت پیش فرض نشون میده
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
datasets: [{
label: 'فروش کل',
backgroundColor: 'rgba(255,16,0,0.78)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 100, 5, 2, 20, 30, 405, 5, 2, 20, 30, 405]
}]
},
options: {
hover: {
mode: 'index'
}
}
});ازاین کد استفاده کردم فقط هر چقدر از axios دیتا میگیرم و تو دیتا میریزم نشون نمیده....
کسی می تونه کمک کنه؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
اگر کد بالا درست کار میکنه و با همین داده های اولیه نمودار رو نمایش میده مشخص میشه که syntax تون اوکی هست. و حالا اگر قصد دارید که بعد از بارگزاری صفحه بصورت داینامیک و بعد از گرفتن داده ها بصورت Ajax از بک اند تغییر پیدا کنه بایستی از متدهای خود chart.js برای رندر کردن مجدد نمودار استفاده کنید و اینجوری نیست که با ریختن داده ها در data خود به خود نمودار آپدیت بشه...
توضیحات دقیق مرتبط با آپدیت نمودار همراه با کدهای مثال در مستندات خود Chart.js اومده و از طریق لینک زیر میتونید مطالعه بفرمایید:
https://www.chartjs.org/docs/latest/developers/updates.html
@miladtest70
سلام
ببینید بهترین کاری که میتونید انجام بدید این هست که در صفحه ای که قصد نمایش آمار فروش بر اساس ماه رو دارید یک درخواست ajax تنظیم کنید، مثلا وقتی که لود صفحه تمام شد این درخواست بره سمت سرور (لاراول)، حالا برای راحتی در رسم چارت چند کار انجام بدید:
- ابتدا میزان فروش کل از مدل مربوطه فراخوانی کنید.
- دیتا رو سمت php تحلیل کنید، بیشتر توضیح میدم: شما باید بیاید و بر اساس دو محور x و y برای chart.js دیتا آماده کنید پس سمت لاراول دو آرایه تعریف کرده و این آرایه هارو برای labels و data که chart.js لازم داره آماده کنید.
- کل این دو آرایه رو به هر روشی که صلاح میدونید در پاسخ درخواست ajax برگردونید، حالا کار شما شروع میشه، دوتا آرایه دریافت کردید که باید در جایی اون هارو موقتا ذخیره کنید، مثلا در یک متغیر let هم کافیه.
- حالا این دو آرایه ای که در متغیرها ذخیره کردید رو به chart.js پاس بدید.
نکته مهم اینکه با خلاقیت سمت لاراول و درخواست ajax میتونید این فرایند رو قشنگ تر هم بکنید، فقط روی آرایه ها تمرکز کافی داشته باشید چه برای سمت سرورتون و چه سمت کلاینت
اگر سوالی داشتید در خدمتم، موفق باشید.
فقط ی سوال دیگه پیشنهاد شما برای تفکیک دیتا های جدول بر اساس تاریخ ذخیره اون ها چیه(created_at)؟؟مثلا دیتای های ماه اول جدا دیتای های ماه دوم...