Highcharts Reloj

Highcharts Gráfico de medidor

El siguiente ejemplo demuestra un reloj.

Ya hemos visto la sintaxis básica de configuración de Highcharts en capítulos anteriores. Ahora veamos otras configuraciones.

---

Configuración

Configuración de chart.type

Configure el tipo de chart como 'gauge'. chart.type describe el tipo de gráfico. El valor predeterminado es 'line'.

var chart = {
   type: 'gauge'
};

Configuración de pane

pane solo se aplica a gráficos polares y medidores angulares. Este objeto de configuración contiene las opciones generales para combinar los ejes x e y. Cada eje x y eje y puede asociarse a un panel mediante un índice.

var pane = {
  startAngle: -150,  // x轴或测量轴的开始度数，以度数的方式给出。0是北
  endAngle: 150      //x轴极坐标或角度轴的最终度数，以度数的方式给出。0是北
};

Ejemplo

Nombre de archivo: highcharts_guage_clock.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(example.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>

El resultado del ejemplo anterior es:

Highcharts Gráfico de medidor

Otras extensiones