در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم.
نمونه سوم : ساخت ساعت با استفاده از نمودار زاویه ای
در این نمونه میخایم یک ساعت تقریبا پیشرفته رو با استفاده از امکانات نمودارهای زاویه ای بسازیم و اونو آموزش بدیم. همونطور که قبلا گفتیم با استفاده از نمودارهای زاویه ای به دلیل اینکه قابلیت کار با زاویهها در خودشون رو دارن، میتونین چیزهای مختلفی رو بسازید و از قدرت این ابزار بهره ببرید. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:
<html> <head> <title>Highcharts Tutorial</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { /** * Get the current time */ function getNow() { var now = new Date(); return { hours: now.getHours() + now.getMinutes() / 60, minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600, seconds: now.getSeconds() * 12 / 60 }; } /** * Pad numbers */ function pad(number, length) { // Create an array of the remaining length + 1 and join it with 0's return new Array((length || 2) + 1 - String(number).length).join(0) + number; } var now = getNow(); var chart = { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, height: 200 }; var credits = { enabled: false }; var title = { text: 'The Highcharts clock' }; var pane = { background: [{ // default background }, { // reflex for supported browsers backgroundColor: Highcharts.svg ? { radialGradient: { cx: 0.5, cy: -0.4, r: 1.9 }, stops: [ [0.5, 'rgba(255, 255, 255, 0.2)'], [0.5, 'rgba(200, 200, 200, 0.2)'] ] } : null }] }; // the value axis var yAxis = { labels: { distance: -20 }, min: 0, max: 12, lineWidth: 0, showFirstLabel: false, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 5, minorTickPosition: 'inside', minorGridLineWidth: 0, minorTickColor: '#666', tickInterval: 1, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', title: { text: 'Powered by<br/>Highcharts', style: { color: '#BBB', fontWeight: 'normal', fontSize: '8px', lineHeight: '10px' }, y: 10 } }; var tooltip = { formatter: function() { return this.series.chart.tooltipText; } }; var series = [{ data: [{ id: 'hour', y: now.hours, dial: { radius: '60%', baseWidth: 4, baseLength: '95%', rearLength: 0 } }, { id: 'minute', y: now.minutes, dial: { baseLength: '95%', rearLength: 0 } }, { id: 'second', y: now.seconds, dial: { radius: '100%', baseWidth: 1, rearLength: '20%' } }], animation: false, dataLabels: { enabled: false } }]; var json = {}; json.chart = chart; json.credits = credits; json.title = title; json.pane = pane; json.yAxis = yAxis; json.tooltip = tooltip; json.series = series; $('#container').highcharts(json, chartFunction); // Add some life var chartFunction = function(chart) { setInterval(function() { now = getNow(); var hour = chart.get('hour'), minute = chart.get('minute'), second = chart.get('second'), // run animation unless we're wrapping around from 59 to 0 animation = now.seconds === 0 ? false : { easing: 'easeOutElastic' }; // Cache the tooltip text chart.tooltipText = pad(Math.floor(now.hours), 2) + ':' + pad(Math.floor(now.minutes * 5), 2) + ':' + pad(now.seconds * 5, 2); hour.update(now.hours, true, animation); minute.update(now.minutes, true, animation); second.update(now.seconds, true, animation); }, 1000); }; }); // Extend jQuery with some easing (copied from jQuery UI) $.extend($.easing, { easeOutElastic: function(x, t, b, c, d) { var s = 1.70158; var p = 0; var a = c; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a); return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b; } }); </script> </body> </html>
همونطور که میبینید در این نمونه علاوه بر فایل اصلی highcharts، فایل hightchart-more رو هم وارد کردیم که قابلیتهای بیشتری رو به قابلیتهای قبلی اضافه میکنه.
میبینید که در ابتدا کدی بصورت زیر قرار داده شده:
function getNow() { var now = new Date(); return { hours: now.getHours() + now.getMinutes() / 60, minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600, seconds: now.getSeconds() * 12 / 60 }; }
این مورد یک تابع هست که در هر بار اجرا و فراخوانی، تاریخ فعلی و کنونی رو دریافت میکنه و ساعت، دقیقه و ثانیه اون رو بصورت مرتب و یک object بر میگردونه.
var chart = { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, height: 200 };
میبینید که نوع نمودار رو برابر با gauge یا زاویه ای قرار دادیم و سایه، حاضیه و رنگ رو برای اون قرار ندادیم و ارتفاع نمودار یا ساعت رو برابر با 200 در نظر گرفتیم.
var pane = { background: [{ // default background }, { // reflex for supported browsers backgroundColor: Highcharts.svg ? { radialGradient: { cx: 0.5, cy: -0.4, r: 1.9 }, stops: [ [0.5, 'rgba(255, 255, 255, 0.2)'], [0.5, 'rgba(200, 200, 200, 0.2)'] ] } : null }] };
بعد از اون با استفاده از متغیر pane پس زمینه ساعت و رنگ اون رو مشخص کردیم. همونطور که میبینید background اون رو بصورت پیش فرض قرار دادیم و همچنین برای اون یک Gradient قرار دادیم که شعاع اون 1.9 هست و موقعیت مرکز دایره هم با استفاده از cx و cy مشخص شده. رنگهایی هم که گرادیان به اونا ختم میشه در ویژگی stops قرار داده شده. با استفاده از این گرادیان یک حالت reflex یا بازتاب زیبا روی ساعت میوفته و مرورگرهایی که گرادیان رو پشتیبانی میکنن اون رو نمایش میدن.
var yAxis = { labels: { distance: -20 }, min: 0, max: 12, lineWidth: 0, showFirstLabel: false, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 5, minorTickPosition: 'inside', minorGridLineWidth: 0, minorTickColor: '#666', tickInterval: 1, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#666', title: { text: 'Powered by<br/>Highcharts', style: { color: '#BBB', fontWeight: 'normal', fontSize: '8px', lineHeight: '10px' }, y: 10 } };
با استفاده از متغیر yAxis هم محور ساعت رو مشخص کردیم و عددها بر روی این محور نمایش داده میشن. حداقل و حداکثر مقدار رو برابر با همون 0 و 12 قرار دادیم که نمایانگر ساعت هست. با استفاده از ویژگیهای دیگه هم ضخامت و رنگ عقربه و تیکها رو مشخص میکنیم و در آخر هم با استفاده از ویژگی title، عنوان ساعت و استایل مورد نظر رو برای اون قرار دادیم.
var series = [{ data: [{ id: 'hour', y: now.hours, dial: { radius: '60%', baseWidth: 4, baseLength: '95%', rearLength: 0 } }, { id: 'minute', y: now.minutes, dial: { baseLength: '95%', rearLength: 0 } }, { id: 'second', y: now.seconds, dial: { radius: '100%', baseWidth: 1, rearLength: '20%' } }], animation: false, dataLabels: { enabled: false } }];
با استفاده از متغیر series داده هامون که همون اعداد ساعت و دقیقه و ثانیه هستن رو قرار دادیم و به نمودار معرفی کردیم. میبینید که سه دسته hour و minute و second اضافه شده و درون هر کدوم از اونا یک ویژگی dial قرار داده شده که با استفاده از اون شعاع و طول و ضخامت دادهها رو مشخص میکنه.
var chartFunction = function(chart) { setInterval(function() { now = getNow(); var hour = chart.get('hour'), minute = chart.get('minute'), second = chart.get('second'), // run animation unless we're wrapping around from 59 to 0 animation = now.seconds === 0 ? false : { easing: 'easeOutElastic' }; // Cache the tooltip text chart.tooltipText = pad(Math.floor(now.hours), 2) + ':' + pad(Math.floor(now.minutes * 5), 2) + ':' + pad(now.seconds * 5, 2); hour.update(now.hours, true, animation); minute.update(now.minutes, true, animation); second.update(now.seconds, true, animation); }, 1000); }; });
در آخر هم یک setInterval قرار دادیم و هر 1 ثانیه یکبار اجرا میشه و تعدادی کار رو انجام میده و ساعتمون رو ره میندازه تا طبیعی به نظر برسه. در هر بار اجرا موقعیت قرار گیری عقربههای ساعت، دقیقه و ثانیه شمار بروزرسانی میشه. خروجی بصورت زیر هست:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !