امروز ، قصد داریم با هم یک دیاگرام یا نمودار با HTML و CSS رسم کنیم. برای این آموزشی از کتابخونه ی جاوااسکریپتی Raphaël کمک خواهیم گرفت. کتابخونه ایی کم حجم برای کار کردن با وکتور ها (SVG) و رسم نمودار یا دیاگرام با HTML  و CSS که در طراحی سایت کاربرد زیادی داره. مورد مثال طراحی نمودار توانایی های برنامه نویسی و طراحی وب یک شخص است. ایده بسیار ساده است ، منحنی هایی با محیط دایره با توابع ریاضیات رسم خواهیم کرد و در داخل دایره ی مرکزی میزان مهارت شخص در زمینه ی خاصی که موس روی اون رفته (Hover) رو به صورت درصدی نمایش خواهیم داد .

پس بریم با HTML شروع کنیم.

با کدهای HTML شروع میکنیم

ساختار HTML ما توسط یک Div با کلاس ‘get’ احاطه خواهد شد. این المان تمام اطلاعاتی که ما برای رسم نمودار ها و منحنی ها نیاز داریم رو در بر خواهد داشت. و یک Div با کلاس ‘diagram’ خواهیم داشت که نمودار ها درش رسم خواهند شد :

<div id="diagram"></div>
<div class="get">
	<div class="arc">
		<span class="text">jQuery</span>
		<input type="hidden" class="percent" value="95" />
		<input type="hidden" class="color" value="#97BE0D" />
	</div>
	<div class="arc">

		<span class="text">CSS3</span>
		<input type="hidden" class="percent" value="90" />
		<input type="hidden" class="color" value="#D84F5F" />
	</div>
	<div class="arc">
		<span class="text">HTML5</span>
		<input type="hidden" class="percent" value="80" />
		<input type="hidden" class="color" value="#88B8E6" />

	</div>
	<div class="arc">
		<span class="text">PHP</span>
		<input type="hidden" class="percent" value="53" />
		<input type="hidden" class="color" value="#BEDBE9" />
	</div>
	<div class="arc">
		<span class="text">MySQL</span>
		<input type="hidden" class="percent" value="45" />
		<input type="hidden" class="color" value="#EDEBEE" />
	</div>
</div>

استایل دهی با CSS

در این بخش هم کار چندانی نداریم ، جز این که المان های دارای کلاس ‘get’ رو hide کنیم (نمایش داده نشوند). و برای المان دارای آی دی ‘diagram’ عرض و ارتفاع مشخص میکنیم :

.get {
	display:none;
}

#diagram {
	float:left;
	width:600px;
	height:600px;
}

شروع به نوشتن JavaScript می کنیم.

در ابتدا یک نمونه از شیء Raphael ایجاد میکنیم و در متغیر ‘ r ‘ ذخیره می کنیم. اولین دایره ی خودمون رو رسم میکنیم و متنی رو داخلش قرار میدیم:

var o = {
	init: function(){
		this.diagram();	
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73;

		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

		var title = r.text(300, 300, 'Skills').attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();

	}
}

می خوایم یه قدم جلوتر بریم و تابعی که نوشتیم رو بزرگ تر کنیم.

  • alpha – زاویه ی قوس
  • random – عددی تصادفی از یک بازه ی مشخص
  • sx,sy – نقاط شروع رسم
  • x,y – نقاط پایانی رسم

path یا مسیر که از دو بخش تشکیل میشه :

  • M – تمامی المان های path می بایست با M که اول عبارت moveto است شروع شوند.
  • A – که با توجه به مقادیرش مسیر مورد نظر را رسم میکند . مقادیر مورد نظر عبارت است از radius-x, radius-y x-axis-rotation, large-arc-flag, sweep-flag, x, y که برای آشنایی با فایل های وکتور و SVG  میتونین مطالعه کنین.
var o = {
	init: function(){
		this.diagram();	
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73;

		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

		var title = r.text(300, 300, 'Skills').attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();

		r.customAttributes.arc = function(value, color, rad){
			var v = 3.6*value,
				alpha = v == 360 ? 359.99 : v,
				random = o.random(91, 240),
				a = (random-alpha) * Math.PI/180,
				b = random * Math.PI/180,
				sx = 300 + rad * Math.cos(b),
				sy = 300 - rad * Math.sin(b),
				x = 300 + rad * Math.cos(a),
				y = 300 - rad * Math.sin(a),
				path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
			return { path: path, stroke: color }
		}

		$('.get').find('.arc').each(function(i){
			var t = $(this), 
				color = t.find('.color').val(),
				value = t.find('.percent').val(),
				text = t.find('.text').text();

			rad += 30;	
			var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

			z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
					this.toFront();
				title.animate({ opacity: 0 }, 500, '>', function(){
					this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
				});
            }).mouseout(function(){
				this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
		});
	}
}

اطلاعاتی که نیاز داریم مثل درصد ها ، رنگ منحنی مورد نظر و متن رو بازیابی می کنیم . هر بار شعاع دایره ها رو کوچک تر می کنیم و path یا مسیر مورد نظر رو رسم می کنیم .

در قسمت آخر انیمیت هایی برای  mouse over تعریف کردیم که زمانی که موس روی هر منحنی میره ، منحنی یه مقدار بزرگ تر میشه و متنی که داخل دایره ی مرکزی هست به مهارت مورد نظر تغییر میکنه.

پیشنهاد :

پیشنهاد میکنیم حتما مستندات کتابخونه ی قدرتمند Raphaël رو مطالعه کنید. و نمونه های ساخت، درست کردن SVG و کار کردن با فایل های وکتوری رو در GitHub با استفاده از کتابخونه ی جاوااسکریپتی Raphaël آموزش ببینید.