26
تشکر

رسم نمودار با amCharts در HTML

amCharts

amCharts

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

اما در این مطلب به نحوه رسم نمودار با استفاده از amCharts خواهیم پرداخت. این نمودارها همانطور که در تصویر مطلب میبینید دارای گرافیک قابل قبول هستند.

در ادامه با ما باشید…

در ابتدا باید کتابخانه amCharts را از اینجا دانلود کرده و به صفحه خودتان متصل کنید.

در قدم بعدی باید ابتدا اطلاعاتی را که قرار است به صورت نمودار نمایش دهیم مشخص کنیم. برای مثال 61.42% از بازدیدکنندگان سایت آپارنت از مرورگر کروم و 31.45% از مرورگر فایرفاکس و 5.04% از مرورگر IE و 2.09% از مرورگرهای دیگر استفاده میکنند.

خوب قرار است ما این اطلاعات را به صورت نمودار نمایش دهیم.

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

<div id="chart" style="width: 100%; height: 400px;">
    Chrome: 61.42%
    Firefox: 31.45%
    IE: 5.04%
    Other: 2.09%
</div>

حالا یک تگ script در head باز کرده و اطلاعات زیر را درون آن قرار میدهیم:

var chart;
var chartData = [
{
    browser: "Chrome",
    pr: 61.42 },
{
    browser: "Firefox",
    pr: 31.45 },
{
    browser: "IE",
    pr: 5.04 },
{
    browser: "Other",
    pr: 2.09 }
];
AmCharts.ready(function() {
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "browser";
    chart.valueField = "pr";
    chart.outlineColor = "#fff";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    chart.depth3D = 10;
    chart.angle = 40;
    chart.write("chart");
});

نتیجه را میتوانید در زیر ببینید:

کتابخانه amCharts در زمینه نمودارها خیلی خیلی پیشرفته است و بیش از 42 نوع نمودار مختلف را میتواند رسم کند. نمودار رسم شده در بالا ساده ترین آنها است. با دانلود کردن دمو میتوانید نمودارهای دیگر این کتابخانه را ببینید. همچنین Document این کتابخانه هم میتوانید به شما در رسم نمودارهای دلخواه کمک کند.

 

  • Hosein می‌گه:

    با سلام
    من میخوام از این اسکریت استفاده کنم ولی کار نمیکنه
    شما اگه ممکنه یکم بیشتر توضیح دهید
    برای اجرا همون یه کتابخانه کافیه یا کتابخانه های دیگری هم مورد نیاز میباشد


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