Highcharts یکی از پلاگین های جی کوئری است که چارت های مختلف و زیبایی را ارایه می دهد و برای رسم چارت مقایسه ای و نمودار آماری با Jquery استفاده می شود.
چارت مقایسه ای برای ارایه تجسمی گرافیکی از داده های آماری استفاده می شود .
مثلا بلفرض میزان بازدید سایت ، تعداد فروش محصولات در بازه زمانی و سود حاصله و غیره از مواردی است که می توانید به صورت گرافیکی رسم و در یک نگاه اطلاعات آن را بفهمید. نمودار های مختلفی مثل نمودار پایه ای ، میله ای ، ستونی وجود دارد .
این اسکریپت به صورت سمت-کاربر براساس جاواسکریپت است که براحتی می شود در پروژه های تحت وب پیاده سازی کرد.
در این آموزش سعی داریم مثالی از خلاصه و رسم چارت مقایسه ای و نمودار آماری با Jquery و Highcharts را بررسی کنیم.
در این مثال سرشماری سه کشور پرجمعیت دنیا را در سه سال اخیر را مقایسه کنیم. این مقایسه را به صورت نمودار ستونی نشان خواهیم داد.
اول باید طول محور xوy و دیگر آپشن ها را تنظیم کنیم .بعد از ست کردن آپشن های ضروری ، یک آرایه ای از کشور ها ایجاد می کنیم. بعد از آن داده های سرشماری را به پلاگین پاس می دهیم تا چارت ما رسم شود.
کد HTML برای نمایش نمودار گرافیکی
کد html زیر چک باکس انتخاب کشور ها را برای مقایسه سرشماری در اختیار کاربر می گذارد . بعد از کلیلک بر روی دکمه compare برای مقایسه اطلاعات سرشماری به صورت نمودار گرافیکی در تگ div با ID، chart نمایش داده می شود.ID این تگ را در آپشن renderTo ست خواهیم کرد.
|
1 2 3 4 5 6 7 8 9 |
<div class="chart-filter"> <div class="chart-item-title"> <input type="checkbox" name="countries" value="China" checked /> China <input type="checkbox" name="countries" value="India" class="chart-item-option" checked /> India <input type="checkbox" name="countries" value="United States" class="chart-item-option" /> United States </div> <input type="button" id="compare" value="Compare" class="btn-input" /> </div> <div id="chart"></div> |
ساخت نمودار ستونی توسط Higcharts
کد زیر برای ست کردن تعدادی آپشن برای رسم نمودار استفاده می شود. که شامل نوع نموادر (میله ای ، ستونی ….) ، عنوان ، طول و عرض ، محور x,y و غیره است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
var options = { chart: { renderTo: 'chart', type: 'column', height: 500, width:530 }, title: { text: 'Population' }, xAxis: { categories: [ '2014','2015','2016' ], title: { text: 'Year' } }, yAxis: { min: 0, title: { text: 'Millon', align: 'middle' } }, plotOptions: { column: { dataLabels: { enabled: true } } }, series: [{},{},{}] }; |
پس از ست کردن تنظیمات ، باید داده های آن ها را قرار بدیم . در کد زیر ، ما کشور ها و سرشماری آن ها را به علاوی تعدادی از آپشن ها مثل رنگ را تنظیم می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// On click event handler to compare data $("#compare").on("click",function(){ var countries = ["China","India","United States"]; var data = [[1347,1360,1374],[1210,1233,1255],[311,316,322]]; var color = ["#10c0d2","#f1e019","#a2d210"]; var selected_countries,j; // Clear previous data and reset series data for (i=0;i<data.length;i++) { options.series[i].name = ""; options.series[i].data = ""; options.series[i].color = ""; } // Intializeseries data based on selected countries var i = 0; $("input[name='countries']:checked").each(function() { selected_countries = $(this).val(); j = jQuery.inArray(selected_countries,countries) if(j >= 0){ options.series[i].name = countries[j]; options.series[i].data = data[j]; options.series[i].color = color[j]; i++; } }); // Draw chart with options var chart = new Highcharts.Chart(options); // Display legend only for visible data. var item; for (k=i;k<=data.length;k++) { item= chart.series[k]; if(item) { item.options.showInLegend = false; item.legendItem = null; chart.legend.destroyItem(item); chart.legend.render(); } } }); |
خروجی اسکریپت رسم چارت مقایسه ای و نمودار آماری با Jquery به اینصورت خواهد بود :
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
اصلا بهترین چارت که دیدم پشم ریزون برین وبسایت https://www.chartjs.org چار پنج نوع چارت داره حرف نداره از چارتای جیکوری میکوری بیا بیرون از نظر من خیلی بهتر از بقیه چارتا بود چون هم ریسپانسیو و هم مخصوص گوشی تبلت و لپتاپ و امثال اینها .. لینک دانلودش cdn هست ویعنی یا با npm و غیره میزنی یا cdn شو جستجو میکنی و بعد کد cdn شو کپی میکنی و داخل فایل جاوااسکریپت پیست و تمام . یکم استفادش پر کُده تو خود وبسایت یاد میده.
مدیر وبسایت عزیز میتونی بجای مطمیین از مطمئن استفاده کنی. [ ئ ] دکمه M هست تو حالت فارسی
دمتون گرم