← Highcharts 基本树状图(Treemap) Highcharts 百分比堆叠面积图 →

Highcharts 时钟

下图是一个 Highcharts 时钟

配置

配置属性 chart.type 为 'gauge' 即可将图表显示为时钟
```
 var chart = {
    type: 'guage'
 };
```
配置属性 pane

属性 pane 只适用在极坐标图和角度测量仪

pane 属性可配置对象持有组合 x 轴和 y 周的常规选项

每个 x 轴和 y 轴都可以通过索引关联到窗格中

pane.startAngle 是 x 轴或测量轴的开始度数，以度数的方式给出，0 是北

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

范例

下面的代码列出了 Highcharts 时钟 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script>

/**
* 获取当前时间
*/
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 chart1;


// Add some life
var chartFunction = function (chart) {
   setInterval(function () {
      now = getNow();

      var hour = chart1.get('hour'),
      minute = chart1.get('minute'),
      second = chart1.get('second'),
      // run animation unless we're wrapping around from 59 to 0
      animation = now.seconds === 0 ? false :{ easing: 'easeOutElastic'};

      // Cache the tooltip text
      chart1.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($.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;
   }
});

var options = {};

options.chart = chart;
options.credits = credits;
options.title = title;
options.pane = pane;
options.tooltip = tooltip;
options.yAxis = yAxis;
options.series = series;

var chart2 = Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 基本树状图(Treemap) Highcharts 百分比堆叠面积图 →

Highcharts 时钟

配置

范例

学习 Hightcharts