آموزش رسم نمودار با Highcharts (جلسه 39) - نمودار زاویه ای - قسمت 3

خرید بک لینک

آخرین مطالب

امکانات وب

آموزش رسم نمودار با Highcharts (جلسه 39) - نمودار زاویه ای - قسمت 3

<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();

retu {

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

retu 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() {

retu 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) retu b;

if ((t /= d) == 1) retu 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);

retu a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;

}

});

</script>

</body>

</html>

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می‌کنید

برچسب: نویسنده: استخدام کار بازدید: 251 تاريخ: سه شنبه 1 تير 1395 ساعت: 0:37

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه