در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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 ثانیه یکبار اجرا میشه و تعدادی کار رو انجام میده و ساعتمون رو ره میندازه تا طبیعی به نظر برسه. در هر بار اجرا موقعیت قرار گیری عقربه‌های ساعت، دقیقه و ثانیه شمار بروزرسانی میشه. خروجی بصورت زیر هست:
امیدوارم از این مطلب خوشتون اومده باشه.
موفق و پیروز باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !