Highcharts - Clock
Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax .
Um exemplo de relógio é fornecido abaixo.
Configurações
Vamos agora ver as configurações / etapas adicionais realizadas.
Tipo de Gráfico
Configure o tipo de gráfico a ser baseado em medidor. Defina o tipo como 'medidor'.
var chart = {
type: 'guage'
};painel
Este tipo se aplica apenas a gráficos polares e medidores angulares. Este objeto de configuração contém opções gerais para o conjunto de eixos X e Y combinados. Cada xAxis ou yAxis pode fazer referência ao painel por índice.
var pane = {
startAngle: -150,
endAngle: 150
};Exemplo
highcharts_guage_clock.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://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>Resultado
Verifique o resultado.