Latest web development tutorials

orologio Highcharts

Highcharts piano di indagine Highcharts piano di indagine

Il seguente esempio illustra l'orologio.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni.

configurazione

Configurazione chart.type

Configurare il tipo di grafico 'calibro'. chart.type descrive il tipo di grafico. Il valore di default è "linea". 

var chart = {
   type: 'gauge'
};

configurare riquadro

pannello è disponibile solo in diagramma polare e l'angolo strumento di misura. Questo oggetto configurabile detiene opzioni generali combinazione asse x e y-settimana. Ogni asse X e Y possono essere collegati al riquadro per indice. 

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

Esempi

Nome file: 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'output sopra esempio è:

Highcharts piano di indagine Highcharts piano di indagine