34
تشکر

رسم نمودار با pChart در PHP

رسم نمودار با pChart در PHP

رسم نمودار با pChart در PHP

این مطلب در دسته بندی مطالب پی اچ پی است. پی اچ پی را در اینجا دنبال کنید.

pChart کتابخانه ای به زبان PHP است که به ما امکان رسم نمودارهایی را میدهد. این کتابخانه رایگان است و به صورت شیء گرایی نوشته شده است. پس از این مطلب آموزشی شما میتوانید نمودارهای خود را با استفاده از این کتابخانه به راحتی درست کنید.


نصب

این کتابخانه با PHP نسخه 5 به بالا کار میکند. همچنین در نسخه شما باید قابلیتهای GD و FreeType فعال باشد. البته امروزه به صورت متداول فعال است اما برای اطمینان با استفاده از تابع phpinfo این دو قابلیت را چک کنید. در صورت فعال بودن این دو قابلیت هم چنین داشتن PHP نسخه 5 به بالا شما میتوانید از pChart استفاده کنید.

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

pChart از آدرس www.pchart.net/download قابل دانلود است. آخرین نسخه که 2.1.3 است را دانلود کنید. همانطور که میبینید در زیر لینک دانلود یک رشته md5 هم داده است که برای چک کردن فایل پس از دانلود گزینه خوبی است. برای مثال در یونیکس میتوان مانند زیر فایل را چک کرد(ضروری نیست):

jajeronymo@web1:~$ md5sum  pChart2.1.3.zip
7895f71126638cbfb73b69c987418107  pChart2.1.3.zip

خب فایل فشرده شده را اکسترکت کنید و در محل که خودتان میخواهید قرار بدهید.

حالا با استفاده از require_once چند عدد از کلاس های pChart را اینکلود میکنیم. این کتابخانه پیشنهاد میکند که این اینکلودها را پس از session_start اضافه کنید(اگر از آن استفاده میکنید) و قبل از اینکه اطلاعاتی را به مرورگر بفرستید. در غیر اینصورت ممکن است PHP خطای headers already sent را بدهد.

<?php
  session_start();
  require_once "pChart/class/pDraw.class.php";
  require_once "pChart/class/pImage.class.php";
  require_once "pChart//class/pData.class.php";
&#91;/php&#93;</div>
<hr />
<p dir="RTL">ساخت نمودارهای ساده</p>
<p dir="RTL">مهم نیست که نموداری که قصد ایجاد آن را دارید چقدر پیچیده است, نمودارهای pChart در سه قدم ایجاد میشوند. مشخص کردن داده ها, ساخت تصویر و نمایش خروجی. با مشخص کردن داده ها شروع میکنیم.</p>
<p dir="RTL">داده ها معمولا در اپلیکیشن های واقعی از دیتابیس می آید اما در این مطلب ما خودمان داده ها را با استفاده از آرایه ایجاد میکنیم. خب ما از هشت عدد اول اعداد فیبوناچی استفاده میکنیم.</p>
<div class="mycode">[php]
$myDataSet = array(0, 1, 1, 2, 3, 5, 8, 13);

همانطور که گفتیم pChart شئ گرا است. شما میتوانید یک کلاس جدید از pData بسازید و با استفاده از متد addPoints اعداد بالا را به عنوان مقادیر نمودار ست کنید.

$myData = new pData();
$myData->addPoints($myDataSet);

شما قدم اول را با موفقیت پشت سرگذاشتید. خب شما الان باید یک کلاس جدید از pImage بسازید که سه آرگومان دارد. عرض, ارتفاع و کلاسی که از pData ساختید. به اینصورت:

$myImage = new pImage(500, 300, $myData);

نمودارها معمولا از متنها برای مشخص کردن میله ها استفاده میکنند. شما میتوانید فونت مخصوص خود را با استفاده از setFontProperties در کلاس pImage ست کنید.

$myImage->setFontProperties(array(
    "FontName" => "pChart/fonts/tahoma.ttf",
    "FontSize" => 15
));

البته فونت Tahoma در پوشه fonts مربوط به pChart وجود ندارد. خودمان آن را گذاشتیم.

تصویری که ما ساختیم دارای عرض 500 و ارتفاع 300 است. این اعداد مشخص کننده کل تصویر هستند. برای مشخص کردن مختصات اصلی نمودار از تابع setGraphArea از کلاس pImage باید استفاده کرد که دارای آرگومانهای X1, Y1 و X2, Y2 است.

$myImage->setGraphArea(25, 25, 475, 275);

بعضی از نمودارها برای خوانایی بیشتر به مقیاسهای مختلف افقی و عمودی احتیاج دارند. که با استفاده از متد drawScale میتوان این مقیاسها را مشخص کرد که دارای دها پارامتر است اما برای سادگی میتواند به صورت پیشفرض بدون پارامتر هم فراخوانی شود.

$myImage->drawScale();

الان زمان انتخاب نوع نمودار است. pChart 14 نمودار مختلف را ارائه میدهد که هر کدام از آنها دارای مقدارهای سفارشی خاص خود هستند. در این مثال ما از پارامتر پیشفرض آن استفاده میکنیم. که به صورت میله ای است.

$myImage->drawBarChart();

حالا با استفاده از متد Render از کلاس pImage و همچنین فرستادن آرگومان null تصویر خروجی به مرورگر فرستاده میشود. به جای null میتوانید آدرس مسیری را بدهید که قصد ذخیره تصویر در آنجا را دارید.  اما شما ابتدا باید که Content-type مناسب به مرورگر فرستاده میشود. که اینکار را با استفاده از تابع header انجام میدهیم.

header("Content-Type: image/png");
$myImage->Render(null);

رسم نمودار با pChart در PHP


ساخت نمودار خطی

حالا میتوانیم نمودارهای پیشرفته تر بسازیم. به سراغ نمودار خطی میرویم. ابتدا مقادیر را به صورت آرایه میسازیم.

$squareSeries = array(10, 10, 8, 7);
$cubeSeries = array(9, 8, 8, 9);
$fourthSeries = array(7, 7.5, 7.5, 8);

حالا مانند مثال قبل با استفاده از تابع addPoints مقادیر را اضافه میکنیم.

$myPowersData = new pData();
$myPowersData->addPoints($squareSeries, "Square");
$myPowersData->addPoints($cubeSeries, "Cube");
$myPowersData->addPoints($fourthSeries, "Fourth");

ما میتوانیم برای هر یک از مقدایر بالا یک رنگ مخصوص به خودش را درست کنیم که با استفاده از متد setPalette امکان پذیر است.  مقادیر رنگ ها به صورت RGBa است.

$myPowersData->setPalette("Square", array(
    "R" => 240, "G" => 16, "B" => 16, "Alpha" => 100
));
$myPowersData->setPalette("Cube", array(
    "R" => 16, "G" => 240, "B" => 16, "Alpha" => 100
));
$myPowersData->setPalette("Fourth", array(
    "R" => 16, "G" => 16, "B" => 240, "Alpha" => 100
));

و دوباره مانند مثال قبل اندازه تصویر و نوع فونت را مشخص میکنیم.

$myPowersImage = new pImage(500, 300, $myPowersData);
$myPowersImage->setFontProperties(array(
    "FontName" => "pChart/fonts/tahoma.ttf",
    "Size" => 15
));

و اندازه گراف و تابع مقیاس پیشفرض را مینویسیم.

$myPowersImage->setGraphArea(40, 40, 460, 260);
$myPowersImage->drawScale();

خب سرانجام نوبت به انتخاب نوع نمودار میرسد که ما نمودار خطی را انتخاب میکنیم.

$myPowersImage->drawLineChart();
header("Content-Type: image/png");
$myPowersImage->Render(null);

رسم نمودار با pChart در PHP

همین نمودار خطی را میتوان به نمودار نقطه ای تبدیل کرد. فقط با عوض کردن متد drawLineChart به drawPlotChart. اما اگر هر دو را با هم استفاده کنیم نتیجه بهتری میدهد(از نظر درک خوانایی نمودار).

$myPowersImage->drawLineChart();
$myPowersImage->drawPlotChart();
header("Content-Type: image/png");
$myPowersImage->Render(null);

رسم نمودار با pChart در PHP

اما کاربر از نمودار بالا چیزی متوجه نمیشود باید اطلاعات را نیز به این نمودار اضافه کرد. با استفاده از متد drawText میتوان برای نمودار یک عنوان درست کرد و با متد drawLegend میتوان اطلاعات خط ها و نقطه ها را وارد نمودار کرد.

متد drawText دارای چهار پارامتر است. top , left و یک آرایه که مشخص کننده رنگ و اندازه متن است (در فارسی نوشتن مشکل دارد. اگر از دوستان کسی توانست فارسی بنویسد در نظرات اعلام کنید).

$myPowersImage->drawText(150, 50, "My First Chart", array(
    "R" => 0, "G" => 64, "B" => 255, "FontSize" => 20
));

متد drawLegend هم دارای گزینه های سفارشی است. در کد زیر ما یک دایره رنگی همراه با بکگراند روشن و کناره(Border) مشکی و همچنین در مختصات 70,100

$myPowersImage->drawLegend(70, 100, array(
    "R" => 220, "G" => 220, "B" => 220,
    "FontR" => 0, "FontG" => 64, "FontB" => 255,
    "BorderR" => 80, "BorderG" => 80, "BorderB" => 80,
    "FontSize" => 12, "Family" => LEGEND_FAMILY_CIRCLE
));

رسم نمودار با pChart در PHP

 


نتیجه

pChart کتابخانه ساده و پرکاربرد برای رسم نمودارها است. در این مطلب فقط مطالب سطحی آن بیان شد و میتوان گزینه های سفارشی خیلی بیشتری در آن به کار برد که البته بعضی از آنها پولی هم است.

کد کامل مثال اول را در زیر میتوانید به صورت کلی ببینید:

<?php
require_once "pChart/class/pDraw.class.php";
require_once "pChart/class/pImage.class.php";
require_once "pChart//class/pData.class.php";  

$myDataSet = array(0, 1, 1, 2, 3, 5, 8, 13);
$myData = new pData();
$myData->addPoints($myDataSet);
  
$myImage = new pImage(500, 300, $myData);
$myImage->setFontProperties(array(
    "FontName" => "pChart/fonts/tahoma.ttf",
    "FontSize" => 15
));
$myImage->setGraphArea(25, 25, 475, 275);
$myImage->drawScale();
$myImage->drawBarChart();
header("Content-Type: image/png");
$myImage->Render(null);

کد کامل مثال دوم را در زیر میتوانید به صورت کلی ببینید:

<?php
require_once "pChart/class/pDraw.class.php";
require_once "pChart/class/pImage.class.php";
require_once "pChart//class/pData.class.php";  

$squareSeries = array(10, 10, 8, 7);
$cubeSeries = array(9, 8, 8, 9);
$fourthSeries = array(7, 7.5, 7.5, 8);
  
$myPowersData = new pData();
$myPowersData->addPoints($squareSeries, "Square");
$myPowersData->addPoints($cubeSeries, "Cube");
$myPowersData->addPoints($fourthSeries, "Fourth");
  
$myPowersData->setPalette("Square", array(
    "R" => 240, "G" => 16, "B" => 16, "Alpha" => 100
));
$myPowersData->setPalette("Cube", array(
    "R" => 16, "G" => 240, "B" => 16, "Alpha" => 100
));
$myPowersData->setPalette("Fourth", array(
    "R" => 16, "G" => 16, "B" => 240, "Alpha" => 100
));
  
$myPowersImage = new pImage(500, 300, $myPowersData);
$myPowersImage->setFontProperties(array(
    "FontName" => "pChart/fonts/tahoma.ttf",
    "Size" => 15
));
  
$myPowersImage->setGraphArea(40, 40, 460, 260);
$myPowersImage->drawScale();
  
$myPowersImage->drawText(150, 50, "My First Chart", array(
    "R" => 0, "G" => 64, "B" => 255, "FontSize" => 20
));
  
$myPowersImage->drawLegend(400, 50, array(
    "R" => 220, "G" => 220, "B" => 220,
    "FontR" => 0, "FontG" => 64, "FontB" => 255,
    "BorderR" => 80, "BorderG" => 80, "BorderB" => 80,
    "FontSize" => 12, "Family" => LEGEND_FAMILY_CIRCLE
));
  
$myPowersImage->drawLineChart();
$myPowersImage->drawPlotChart();
header("Content-Type: image/png");
$myPowersImage->Render(null);
  • محمد می‌گه:

    ممنون از سایت خوبتون,
    مال من خم GD فعال هست هم freetype هم نسخه ی PHP 5 هست,
    ولی نمودار و نمایش نمیده, مثل عکسی که لود نمیشه هست,
    فک کنم مشکل تو همین قسمت
    header(“Content-Type: image/png”);
    $myImage->Render(null);
    باشه,
    اگه میشه راهنمایی کنید, ممنون.

  • ali می‌گه:

    ممنون از سایت خوبتون.
    برای فارسی نوشتن fagd.php رو دانلود کردم اما باز فارسی نمیشه.از چه فونتی استفاده کنم

  • مهدی می‌گه:

    بسیار عالی و پر کاربرد بود … ممنون

  • saman می‌گه:

    از سایت خوبت خیلی ممنونم
    یه سوالی داشتم و اون اینه که کتابخونه رو چطوری نصب کنیم تو چه مسیری کپیش کنیم ؟
    چطوری مطمئن بشیم که نصب شده ؟
    واینکه من میخوام با php یه دایره یا مربع بکشم چطور می تونم این کار رو بکنم؟
    واقعا از سایت خوبت ممنونم

  • فاطمه می‌گه:

    واسه من پیغام خطا میده!!!
    میگه نمیتونه نشون بده

  • a می‌گه:

    دل و دولت شاد

  • مهدی می‌گه:

    آقا اگه بخایم فارسی توش بنویسیم چی کار کنیم خیلی واجبه

  • ندا می‌گه:

    سلام خسته نباشید.خودت نوشته بودی؟


  • نظرات این مطلب بسته است.