Highcharts horloge
L'exemple suivant illustre l'horloge.
Dans la section précédente, nous savons déjà Highcharts syntaxe de configuration de base. Regardons les autres configurations.
configuration
Configuration chart.type
Configurer le type de graphique 'jauge'. chart.type décrit le type de graphique. La valeur par défaut est "en ligne".
var chart = { type: 'gauge' };
Configurer volet
volet est disponible uniquement dans la parcelle polaire et instrument de mesure d'angle. Cet objet configurable détient des options combinaison axe x-général et y semaines. Chaque axe x et l'axe y peuvent être reliés à la vitre par index.
var pane = { startAngle: -150, // x轴或测量轴的开始度数,以度数的方式给出。0是北 endAngle: 150 //x轴极坐标或角度轴的最终度数,以度数的方式给出。0是北 };
Exemples
Nom du fichier: highcharts_guage_clock.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/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() { /** * 获取当前时间 */ 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: 'Highcharts 时钟' }; 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>
L'exemple ci-dessus sortie est: