morris : رسم نمودارهای زیبا به راحتی آب خوردن!

در این مطلب میخوام یک ابزار بنام highlightjs رو خدمتتون معرفی کنم که با استفاده از اون میتونین به راحتی هر چه تمامتر برای سایت خودتون نمودارهای زیبا و پیشرفته ای رو قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین. با استفاده از این ابزار میتونین نمودارهای خطی ، سطحی، ستونی و دایره ای رو رسم کنید.

morris

 

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به فایلهای morris.css و jquery.min.js و raphael-min.js و morris.min.js نیاز داریم.

من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7Learn.com - Morris.JS</title>
	<link rel="stylesheet" href="morris.css">
	<style type="text/css">
		#line, #area, #bar, #donut {
			width: 500px;
			height: 200px;
		}
	</style>
</head>
<body>
	<h1>Line Chart :</h1>
	<div id="line"></div>
	<h1>Area Chart :</h1>
	<div id="area"></div>
	<h1>Bar Chart :</h1>
	<div id="bar"></div>
	<h1>Donut Chart :</h1>
	<div id="donut"></div>
	<script src="jquery.min.js"></script>
	<script src="raphael-min.js"></script>
	<script src="morris.min.js"></script>
	<script type="text/javascript">
	</script>
</body>
</html>

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

همونطور که مشاهده میکنید ، برای هر نمودار یک div با همان نام قرار دادیم و عرض و طول اونا رو با استفاده از CSS مشخص کردیم.

رسم نمودار خطی ( Line ) :

باید در تگ اسکریپت نهایی کدهای زیر رو قرار بدین :

new Morris.Line({
	element: 'line',
	data: [
		{ x: '2006', a: 100, b: 90 },
		{ x: '2007', a: 75,  b: 65 },
		{ x: '2008', a: 30,  b: 40 },
		{ x: '2009', a: 75,  b: 65 },
		{ x: '2010', a: 50,  b: 40 },
		{ x: '2011', a: 75,  b: 40 },
		{ x: '2012', a: 100, b: 90 }
	],
	xkey: 'x',
	ykeys: ['a', 'b'],
	labels: ['Series A', 'Series B']
});

میبینید که در ابتدا با استفاده از عملگر new یک نمونه از شی Morris ساختیم و متد Line رو برای اون فراخوانی کردیم. این متد ویژگی‌های زیادی رو در بر میگیره که من در بالا اون ویژگی هایی که لازمه رو قرار دادم.

  • element : عنصری که قراره نمودار درون اون قرار بگیره. مقدار اون رو باید برابر با مقدار id المنت مورد نظر قرار بدین
  • data : باید در این قسمت مقادیری که قراره روی نمودار نمایش داده بشن رو قرار بدین. هر مقدار رو باید در {} قرار بدین و اولین اعضا ، تشکیل دهنده ی محور افقی هستن و از عضو دوم به بعد تشکیل دهنده ی محور عمودی.
    اگر فقط a رو بزارین ، بر روی نمودار فقط یک خط کشیده میشه و اگر میخواین چند خط روی نمودار کشیده بشه ، میتونین به تعداد دلخواه اعضاء رو زیاد کنید
  • xkey : باید مقدار این ویژگی رو برابر کلید عضو اول ویژگی data قرار بدین
  • ykeys : هر تعداد که اعضا در ویژگی data اضافه کرده باشین ، باید به ترتیب کلیدهاشونو در اینجا قرار بدین
  • labels : برای هر مقدار و خط باید یک عنوان قرار بدین تا وقتی که روی اون خط هاور میکنید ، به کاربر نشون داده بشه

رسم نمودار سطحی ( Area ) :

new Morris.Area({
	element: 'area',
	data: [
		{ x: '2006', a: 100, b: 90 },
		{ x: '2007', a: 75,  b: 65 },
		{ x: '2008', a: 30,  b: 40 },
		{ x: '2009', a: 75,  b: 65 },
		{ x: '2010', a: 50,  b: 40 },
		{ x: '2011', a: 75,  b: 40 },
		{ x: '2012', a: 100, b: 90 }
	],
	xkey: 'x',
	ykeys: ['a', 'b'],
	labels: ['Series A', 'Series B']
});

کاملا شبیه به Line با این تفاوت که در اینجا باید متد Area رو فراخوانی کنید.

لیست کامل ویژگی‌های Line و Area 

رسم نمودار ستونی ( Bar ) :

new Morris.Bar({
	element: 'bar',
	data: [
		{ year: '2008', value: 20 },
		{ year: '2009', value: 10 },
		{ year: '2010', value: 5 },
		{ year: '2011', value: 5 },
		{ year: '2012', value: 20 }
	],
	xkey: 'year',
	ykeys: ['value'],
	labels: ['Value']
});

همانند قبل هست توضیحاتش.

لیست کامل ویژگی های Bar

رسم نمودار دایره ای ( Donut ) :

new Morris.Donut({
	element: 'donut',
	data: [
		{ label: '2008', value: 20 },
		{ label: '2009', value: 10 },
		{ label: '2010', value: 5 },
		{ label: '2011', value: 5 },
		{ label: '2012', value: 20 }
	]
});

این نمودار ساده‌تر هست و کافیه که برای هر قسمت یک label و یک مقدار قرار بدین.

لیست کامل ویژگی های Donut

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

[dl]لینک دانلود[/dl]

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۱۴ دیدگاه
فرهاد ۳۰ تیر ۱۳۹۹، ۲۱:۱۸
در بخش ykeys میشه از کلمه فارسی استفاده کرد ؟ مثلا ماه های شمسی فروردین و ...
نازنین کریمی مقدم ۲۲ شهریور ۱۳۹۹، ۱۳:۲۸
بله امکانپذیر هست.
شما نام فیلدهای ykeys رو لاتین انتخاب میکنید (مثلا a یا b) و مقادیری که در آرایه تون به این فیلدها نسبت میدین میتونن فارسی باشن، فقط حتما این تنظیمات رو اضافه کنید:
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
hadi ۲۲ خرداد ۱۳۹۹، ۱۴:۱۷
سلام
ببخشد چجوری میتونیم مقادیر data رو داینامیک کنیم؟ یا از یک متغییر دیگ بخونه؟
ممنون
نازنین کریمی مقدم ۲۲ شهریور ۱۳۹۹، ۱۳:۲۲
درود.
همونطور که در مقاله دیدید برای کار با نمودارها باید از یک آرایه برای مقداردهی نقاط استفاده کنید.
برای داینامیک کردن مقادیر درون آرایه، با یک تابع آرایه رو به هرصورتی که میخواهید مقداردهی کنید و بعد در بخش new کردن نمودار، این فیلدها رو به صورت پارامتری مقداردهی کنید:
data= [{ x: '2006', a: 100, b: 90 }, { x: '2007', a: 75, b: 65 },]
data: نام آرایه = data
xkey: نام فیلد درون آرایه= x
ykeys: نام سایر فیلدهای درون آرایه = ['a','b']

درضمن اگه مقادیر قرار هست از سمت سرور بیان، میتونید از جیسون کمک بگیرید.
محدثه علاالدین ۰۹ آذر ۱۳۹۷، ۱۲:۴۱
ممنون از راهنماییتون آقای اسفندیاری
از لینکی که فرستاده بودید ، jquery-1.8.2.min.js رو نداشتم که چون تو این فایل js، تنظیمات utf8 هست با اضافه کردنش مشکل فارسی حل شد.[codeBox]contentType: "application/x-www-form-urlencoded; charset=UTF-8",[/codeBox]
محمد اسفندیاری ۰۹ آذر ۱۳۹۷، ۱۵:۰۰
موفق باشید دوست عزیز
محدثه علاالدین ۰۸ آذر ۱۳۹۷، ۱۲:۰۳
این یه نمودار خطیه :[codeBox]var MorrisChartsDemo = {
init: function () {
new Morris.Line({
element: "m_morris_1",
data: [{ y: "2006", a: 100, b: 90 }, { y: "2007", a: 75, b: 65 }
, { y: "2008", a: 50, b: 40 }, { y: "2009", a: 75, b: 65 }
, { y: "2010", a: 50, b: 40 }, { y: "2011", a: 75, b: 65 }, { y: "2012", a: 100, b: 90 }]
, xkey: "y", ykeys: ["a", "b"], labels: ["دریافت", "ارسال"]
})

}
}; jQuery(document).ready(function () { MorrisChartsDemo.init() });[/codeBox]
محمد اسفندیاری ۰۸ آذر ۱۳۹۷، ۱۹:۲۲
دوست عزیز مشکل نداره
https://codepen.io/anon/pen/eQQKJV

این لینک رو ببینید
محدثه علاالدین ۰۸ آذر ۱۳۹۷، ۰۱:۰۸
سلام
ممنون بابت توضیحات خوبتون
من برای لیبل سطر و ستون از کلمات فارسی استفاده کردم ولی درست نشون نمیده.
چه کار باید بکنم؟
محمد اسفندیاری ۰۸ آذر ۱۳۹۷، ۱۱:۵۱
سلام
میشه کدهاتون رو بفرستید که ببینم
Sajjad Marvi.m ۲۱ آذر ۱۳۹۶، ۱۵:۳۳
درود مهندس.
من بجای سال در محور افقی (2010 تا 2016) تاریخ میزارم و نمدار بهم میریزه ! مثلا میزارم 1396/01/01 تا 1396/01/07 :[codeBox]<script type="text/javascript">
new Morris.Line({
element: 'line',
data: [
{ x: '1396/01/01', a: 100, b: 90 },
{ x: '1396/01/02', a: 75, b: 65 },
{ x: '1396/01/03', a: 30, b: 40 },
{ x: '1396/01/04', a: 75, b: 65 },
{ x: '1396/01/05', a: 50, b: 40 },
{ x: '1396/01/06', a: 75, b: 40 },
{ x: '1396/01/07', a: 100, b: 90 }
],
xkey: 'x',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
</script>[/codeBox]
محمد اسفندیاری ۲۲ آذر ۱۳۹۶، ۰۷:۵۹
سلام دوست عزیز
یک سری قالب مشخص برای قرار دادن تاریخ وجود داره که باید از اونا استفاده کنید.
اگر بخواید از همین قالبی که قرار دادید استفاده کنید، میتونین ویژگی parseTime: false رو به ویژگی های بالا اضافه کنید تا مشکلتون حل بشه
همچنین به دلیل اینکه لیبل ها مقداری طولانی هستند، میتونین با استفاده از xLabelAngle: 90 اونا رو 90 درجه بچرخونید تا خوانایی اونا بیشتر بشه.
موفق باشید
Amir Saleh ۲۴ اسفند ۱۳۹۳، ۲۰:۵۵
جناب اسفندیار به نظر شما این بهتره یا chartjs

من برسی تخصصی نکردم ولی به نظرم chartjs بهتره

نظر شما کدومه ؟
محمد اسفندیاری ۲۴ اسفند ۱۳۹۳، ۲۱:۱۷
با عرض سلام
morris از چهار تا نمودار بیشتر پشتیبانی نمیکنه ، ولی chartjs پیشرفته تره و امکاناتش هم بیشتره
اگر کارتون ساده هست ، پیشنهاد میکنم که از morris استفاده کنید
موفق باشید