استفاده و آموزش درج نمودار و گراف در وردپرس
فهرست مطالب
آیا روش بهتری برای درک داده ها، رابطه بین نقاط مختلف داده و همچنین تغییر ارزش آن ها در طول زمان نسبت به استفاده از نمودارها و گراف ها وجود دارد؟ وقتی نوبت به نمایش چیزی به خشکی و کسالت آوری داده ها می رسد، هیچ چیز مانند یک نمایش بصری نیست که آن را قابل استفاده کند.
سازندگان تم های وردپرس این را می دانند، همانطور که از انواع تم های با پشتیبانی نمودار مشهود است. با این حال، افزونه Qi Addons for Elementor این کار را یک قدم جلوتر انجام می دهد. در میان شصت افزونه رایگان Elementor که با این افزونه دریافت می کنید، بزرگترین آیتم رایگان موجود در آن افزونه های نمودار و گراف است.
در این مقاله، ما روی چیزی تمرکز می کنیم که به شما امکان می دهد نمودار و گراف در وردپرس ایجاد کنید. کارهای بسیار جذابی وجود دارد که می توانید با آن انجام دهید به طوری که تصمیم گرفتیم نحوه ایجاد دو نمودار زیبا را که می توانید در صفحه افزونه مشاهده کنید، به شما نشان دهیم.
آنچه در این مقاله بررسی می کنیم موارد زیر است:
- اضافه کردن نمودار و گراف در وردپرس
- ویرایش محتوای نمودار خطی
- یکپارچه سازی نمودار خطی
- ویرایش و یکپارچه سازی نمودار میله ای
اضافه کردن نمودار در وردپرس
قبل از اینکه بتوانید با استفاده از Qi Addons for Elementor و ویجت نمودار آن، یک نمودار در وردپرس اضافه کنید، باید افزونه ایجاد کننده صفحه Elementor را نصب و فعال کنید. به راحتی می توانید آن را در WordPress.org پیدا کنید، یا با رفتن به افزونه ها> افزودن جدید و جستجوی آن، این افزونه را نصب و فعال کنید. استفاده از افزونه تا زمانی که تصمیم بگیرید به ویژگی هایی نیاز دارید که فقط برای مشتریان پولی در دسترس است، رایگان است.
بیشتر بخوانید:
خطاهای رایج وردپرس و آموزش حل آن ها
پس از نصب هر دو افزونه، می توانید یک صفحه جدید ایجاد کرده یا صفحه موجود را ویرایش کنید تا نمودارهایی را که در صفحه اصلی افزونه Graph مشاهده کرده اید اضافه کنید. ما یک صفحه جدید ایجاد کرده ایم و همچنین یک قسمت دو ستونی برای قرار دادن دو نمودار خود ایجاد کرده ایم.
پس از پیدا کردن ویجت Graphs و انتقال آن به یک ستون خالی، برخی از محتویات متغیرهایی را در آن مشاهده خواهید کرد. ما به شما نشان خواهیم داد که چگونه گام به گام آن را به اولین گراف از دو گراف مورد استفاده برای الهام بخشیدن به شما در ایجاد نمودارهای فوق العاده تبدیل کرده ایم.
بیشتر بخوانید:
ویرایش محتوای نمودار و گراف در وردپرس خط
بلافاصله متوجه سه خط می شوید که مجموعه داده ها را نشان می دهند. گزینه های آنها بخش عمده ای از تنظیماتی را که می توانید در مورد محتویات نمودار تغییر دهید، در خود نگه می دارد. اما ابتدا به برچسب های داده ای که در زیر نمودار و در امتداد محور X نمودار قرار دارند توجه کنید. در حال حاضر، آنها می گویند، “1 ماه”، “3 ماه” و غیره.
برای تغییر برچسب های داده، تنها کاری که باید انجام دهید این است که موارد جدید را در منوی عمومی گزینه های محتوا، درست در زیر موارد وارد کنید. مطمئن شوید که آنها را با استفاده از کاما جدا کنید. ما آنها را به “one”، “Two”، “Three”، “Four”، “Five” تغییر می دهیم.
با حرکت به بالا، می توانید موارد نمودار را تنظیم کرده یا موارد جدید را با استفاده از دکمه افزودن مورد (Add Item) اضافه کنید. هنگام ویرایش موارد، به چند مورد بسیار مهم توجه کنید. اولین مورد، مقادیر مجموعه داده است – مقادیری که نوع خمیدگی خط را در این نوع نمودار تنظیم می کند. شما همچنین برچسب های مجموعه داده را مشاهده خواهید کرد – اینها به شما امکان می دهد هر مورد را به گونه ای برچسب گذاری کنید که وقتی آن را در گزینه های سبک فعال می کنید در یک برچسب قابل مشاهده باشد. همچنین به گزینه های رنگ، حالت های پر کردن، ناحیه و رنگ های پوشش توجه کنید. برخی از این گزینه ها برای نمودارهای خطی و برخی دیگر فقط برای نمودارهای میله ای هستند.
برای به دست آوردن نوع نمودار مورد نظر، مقادیر مجموعه داده ها را به 39، 62، 64، 51 و 58 تغییر داده ایم. نام برچسب مجموعه داده را به Photography تغییر داده ایم. رنگی که انتخاب کرده ایم دارای کد #888db3 است و ما از آن برای رنگ منطقه نیز استفاده کرده ایم. برای رنگ آمیزی ناحیه بین خطوط یک و دو، مقدار 1+ را به حالت های پر کردن داده ایم. در اینجا چیزی است که پس از این همه تغییرات به دست آوردیم.
با حرکت به مورد دوم، ما مجموعه داده های 39،59،58،44،54 را به آن داده ایم، برچسب Art Direction، #c1c3c7 به عنوان رنگ خط و منطقه، و همچنین حالت پر کردن را روی 1+ تنظیم کرده ایم.
برای مورد سوم، ما از 39، 57، 55، 38 و 45 به عنوان مقادیر مجموعه داده استفاده کرده ایم و برچسب web design را به آن داده ایم. رنگی که انتخاب کردیم #EDEDED99 بود. مقداری شفافیت برای آن مشخص کردیم. حالت پر کردن یا filling را روی “Origin” قرار داده ایم تا این جلوه واقعی را بدست آوریم.
با این کار، ما تغییرات محتوا را در نمودار اول ایجاد کرده ایم و می توانیم به ظاهر طراحی آن بپردازیم.
بیشتر بخوانید:
استایل دهی به نمودار خطی در وردپرس
هنگامی که به گزینه های Style می روید، اولین چیزی که باید انتخاب کنید سبک گراف است که می خواهید ایجاد کنید. در حال حاضر، ما به شما نشان داده ایم که چگونه یک نمودار خطی ایجاد کرده ایم. کمی بعد، به شما نشان می دهیم که چگونه یک نمودار میله ای ساخته ایم. در این قسمت شما قادر خواهید بود تراز نمودار، اندازه آن و همچنین عرض حاشیه – عرض خطوط را انتخاب کنید. ما اندازه نمودار و گراف در وردپرس را روی 87٪ و عرض حاشیه را روی 3 پیکسل تنظیم کرده ایم.
بیشتر بخوانید:
در مرحله بعد گزینه های Legend Style قرار دارند. همه آن برچسب های مجموعه داده ای که ما انتخاب کرده ایم، اکنون شروع به نمایش می کنند. گزینه هایی که در اختیار دارید شامل فعال کردن برچسب نمودار، انتخاب موقعیت و تراز است. ما برچسب یا legend را در نمودار خود فعال کرده ایم، موقعیت آن را در پایین انتخاب کرده و با تراز پیش فرض چسبیده ایم.
در مورد نوار legend، می توانید عرض، ارتفاع و حاشیه آن را انتخاب کنید. برای عرض و ارتفاع، 8 پیکسل را انتخاب کرده ایم. حاشیه را روی 40 پیکسل تنظیم کرده ایم.
مجموعه نهایی گزینه های Legend Style به شما امکان می دهد رنگ، فونت، اندازه فونت و وزن برچسب را تعیین کنید. رنگ را روی #1e1e1e، فونت را روی DM Sans، اندازه فونت را 16 پیکسل و وزن فونت را متوسط تنظیم کرده ایم.
بیشتر بخوانید:
در مجموعه نهایی گزینه های Style، با Tick Style، می توانید حداقل و حداکثر مقدار نمایش داده شده در محور Y و همچنین اندازه مرحله ای را که می خواهید نشان دهید تنظیم کنید. ما آن را طوری ساخته ایم که مقادیر 0 تا 80 را با گام های 20تایی نشان می دهد.
بیشتر بخوانید:
ویرایش و یکپارچه سازی نمودار میله ای
اکنون که تا حدودی با گزینه های موجود آشنا شده اید، می توانیم هنگام ایجاد نمودار نواری سرعت را افزایش دهیم. پس از یافتن مجدد افزونه Graphs و کشیدن آن به ستون دیگر، مستقیماً به برگه Style رفتیم و Graph Type را به نوار یا Bar تغییر دادیم. با بازگشت به برگه سبک، چند تغییر ایجاد کردیم – یکی از موارد را حذف کردیم و برچسب های داده را روی “یک”، “دو”، “سه” و “چهار” تنظیم کردیم.
بیشتر بخوانید:
در برگه Style، اندازه نمودار جدید را به 85 تغییر داده ایم. عرض مرز و پهنای حاشیه را روی صفر قرار داده ایم. اندازه نوار را روی 0.88 تعیین می کنیم که تعیین می کند یک نوار چقدر از فضای اختصاص داده شده اش را اشغال کند. اندازه طبقه بندی را روی 0.6 می گذاریم، که تعیین می کند گروهی از میله ها چقدر از فضای اختصاصی خود را اشغال می کنند.
بیشتر بخوانید:
در سبک legend، تقریباً مقادیر نمودار قبلی را کپی کرده ایم. Legend را فعال کرده و آن را در پایین قرار داده ایم. عرض و ارتفاع نوار را روی 11 پیکسل و حاشیه را روی 40 تنظیم کرده ایم. رنگی که برای برچسب انتخاب کردیم #1e1e1e، فونت DM Sans، اندازه فونت 16 و وزن متوسط بود. همچنین سبک Tick را با مقادیر 0، 80 و 20 کپی کرده ایم.
با بازگشت به محتوا، زمان آن رسیده است که موارد را روی مقادیر جدید خود تنظیم کنید. مجموعه داده ای که برای اولین مورد استفاده کردیم 63،38،24 و 56 است. برچسب Photography است و از #888DB3 به عنوان رنگ انتخابی خود برای Color Area و Hover Area Color استفاده کرده ایم.
برای مورد دوم، مقادیر مجموعه داده 45، 76، 48 و 36 است. برچسب را به Art Direction و Area and Hover Area Colors را به #d1c3d7 تغییر دادیم. با این کار، می توانید نتایج کار خود را پیش نمایش کرده و مشاهده کنید – آنها باید با نمونه ای که در صفحه ویجت مشاهده می کنید مطابقت داشته باشد.
سخن آخر
اگر نیاز به ایجاد نمودار یا گراف دارید، افزونه Qi Addons for Elementor افزونه مناسبی برای شما خواهد بود. در این مقاله به شما نشان داده ایم که چگونه می توانید نمودارهای خیره کننده را فقط در چند گزینه ایجاد کنید – آسان تر یا زیباتر از این نمی شود. بنابراین اگر داده هایی وجود دارد که نیاز دارید بصری نمایش داده شوند، تردید نکنید و بزرگترین بسته رایگان افزونه های Elementor در جهان را دریافت کنید.
منبع:
https://qodeinteractive.com/magazine/how-to-create-charts-and-graphs-in-wordpress/
مقالات مرتبط
تست A/B چیست؟ ترفندهای پیشبرد سایت با سعی و خطا...
فهرست مطالب صرف نظر از این که وب سایت شما در چه زمینه ای است، ...
آریا مسعودخواه
ساخت نقشه سایت xml در وردپرس و معرفی آن به گوگل...
فهرست مطالب باید بدانید که یکی از اقدامات مهمی که برای در جهت ...
آریا مسعودخواه
ابزار دیس اوو را چه زمانی بکار ببریم؟ چگونه لین...
فهرست مطالب در این مقاله به صورت گام به گام نحوه و زمان استفاد...
آریا مسعودخواه
تبلیغات
