Horloge Highcharts

Graphique à jauge Highcharts

L'exemple suivant illustre une horloge.

Nous avons déjà appris la syntaxe de configuration de base de Highcharts dans les chapitres précédents. Maintenant, examinons d'autres configurations.

Configuration

Configuration de chart.type

Définissez le type du graphique sur 'gauge'. chart.type décrit le type de graphique. La valeur par défaut est "line".

var chart = {
   type: 'gauge'
};

Configuration du pane

Le pane ne s'applique qu'aux graphiques polaires et aux jauges angulaires. Cet objet configurable contient les options générales pour combiner l'axe des x et l'axe des y. Chaque axe des x et chaque axe des y peut être associé au pane via un index.

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

Exemple

Nom du fichier : highcharts_guage_clock.htm

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

La sortie de l'exemple ci-dessus est :

Graphique à jauge Highcharts

autres extensions