نوشته های شخصی و فنی مهدی هاشمی نژاد

چند وقت پیش، نیاز به کشیدن یک نمودار در صفحه HTML با استفاده از JavaScript داشتم و یکی از بهترین کتابخانه هایی که پیدا کردم، Flot بود. کتابخانه ای نسبتا کامل و قوی که با استفاده از jQuery نمودارهای جالبی رسم میکند و بهترین نکته برای من هم این بود که داده ها را از مقادیر جداول داخل صفحه نمی خواند و در عوض سری های داده را با فرمت JSON دریافت میکند.
این کتابخانه برای رسم نمودارها، از عنصر canvas که در HTML 5 معرفی شده است، استفاده می کند (احتمالا در آینده یک پست درباره استفاده از عنصر canvas خواهم نوشت). اکثر مرورگرهای مدرن، از این عنصر پشتیبانی میکنند ولی مشکلی مهمی که استفاده از canvas دارد این است که مرورگر Internet Explorer در هیچ نسخه ای (حتی نسخه 8) از آن پشتیبانی نمیکند. برای رفع این مشکل کتابخانه های مختلفی نوشته شده است که Flot از یکی از آنها با نام excanvas استفاده میکند که توسط google نوشته شده است.
تا اینجای کار همه چیز به نظر خوب می آمد، ولی به محض اینکه جهت نوشته های صفحه را راست به چپ کردم (direction: rtl) همه چیز در IE به هم ریخت و دیگر هیچ نموداری دیده نمیشد. بعد از کمی دستکاری توابع موجود در excanvas بالاخره موفق شدم همه چیز را در جهت راست به چپ هم درست کنم و از این کتابخانه نمودار جالب در نوشته های فارسی هم استفاده کنم.
برای استفاده از این کتابخانه، ابتدا کتابخانه excanvas را در صفحه اضافه کنید. دقت کنید که چون این کتابخانه مخصوص IE در نظر گرفته شده است، بهتر است آنرا از طریق کامنتهای شرطی اضافه کنید. سپس مثل بقیه پلاگین های jQuery، بعد از اضافه کردن ارجاع jQuery، ارجاع مربوط به کتابخانه را اضافه کنید.

    <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.pack.js"></script>

سپس برای رسم نمودار سری های داده را تعریف میکنیم (این سری ها احتمالا از طرف سرور با فرمت JSON ارسال میشوند) و در نهایت با فراخوانی تابع plot و ارسال پارامترهای لازم (شامل محل رسم نمودار و سری ها و چگونگی رسم آنها) نمودار رسم می شود. دقت کنید که محل رسم نمودار، یک div ساده است که در آن عرض و طول تنظیم شده است. به عنوان نمونه من اینجا با استفاده از دستورات زیر، نمودار این صفحه را رسم کرده ام.

$(function () {
    var d1 = [[0, 5], [5, 11], [8, 7], [9, 10]];
    var d2 = [[0, 8], [4, 3], [8, 5], [9, 13]];
    var d3 = [[0, 3], [2,5], [4, 5], [7, 6], [8, 3], [9, 7]];
    var d4 = [[1, 6], [4,11], [5, 14], [7, 8]];

    $.plot($("#placeholder"), [
		d1, 
		{data: d2, lines: { show: true, fill: true }},
		{data: d3, lines: { show: true }, points: { show: true }},
		{data: d4, bars: { show: true }, points: { show: true }}
	]);
});

نمودار حاصل از دستورات بالا به صورت زیر رسم خواهد شد:

در ادامه مثالهای خود کتابخانه Flot را با انجام تصحیحات لازم برای رسم نمودار در حالت RTL ضمیمه کرده ام که در صورت نیاز به توضحیات بیشتر و آموزش چگونگی رسم نمودارهای متنوع با استفاده از Flot میتوانید از آن استفاده کنید.

ضمیمه	اندازه
direction fixed flot-0.zip	97.19 کیلو بایت