# Highcharts 时钟
以下实例演示了时钟。
我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。
## 配置
### chart.type 配置
配置 chart 的 type 为 'gauge' 。chart.type 描述了图表类型。默认值为 "line"。
```
var chart = { type: 'gauge' };
```
### pane 配置
pane 只适用在极坐标图和角度测量仪。此可配置对象持有组合x轴和y周的常规选项。每个x轴和y轴都可以通过索引关联到窗格中。
```
var pane = { startAngle: -150, // x轴或测量轴的开始度数,以度数的方式给出。0是北 endAngle: 150 //x轴极坐标或角度轴的最终度数,以度数的方式给出。0是北 };
```
### 实例
文件名:highcharts_guage_clock.htm
```
<html> <head> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/highcharts.js"></script> <script src="/try/demo_source/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>
```
以上实例输出结果为:
![](https://box.kancloud.cn/2015-12-29_56825180b43af.png)
- Highcharts 简介
- Highcharts 环境配置
- Highcharts 配置语法
- Highcharts 配置选项详细说明
- Highcharts 曲线图
- Highcharts 基本曲线图
- Highcharts 带有数据标签曲线图表
- Highcharts 异步加载数据曲线图表
- Highcharts 时间序列,可缩放的图表
- Highcharts X 轴翻转曲线图
- Highcharts 带标记曲线图
- Highcharts 标示区曲线图
- Highcharts 时间间隔图表
- Highcharts 对数图表
- Highcharts 区域图
- Highcharts 基本区域图
- Highcharts 使用负数区域图
- Highcharts 堆叠区域图
- Highcharts 百分比堆叠区域图
- Highcharts 丢失值区域图
- Highcharts 反转x轴与y轴
- Highcharts 曲线区域图
- Highcharts 区间区域图
- Highcharts 使用区间和线的区域图
- Highcharts 条形图
- Highcharts 基本条形图
- Highcharts 堆叠条形图
- Highcharts 反向条形图
- Highcharts 柱形图
- Highcharts 基本柱形图
- Highcharts 使用负值的反向柱形图
- Highcharts 堆叠柱形图
- Highcharts 堆叠组柱形图
- Highcharts 使用百分比的堆叠柱形图
- Highcharts 标签旋转柱形图
- Highcharts 堆叠组柱形图
- Highcharts 固定布局柱形图
- Highcharts 使用 HTML 表格数据的柱形图
- Highcharts 区间柱形图
- Highcharts 饼图
- Highcharts 基本饼图
- Highcharts 显示图例饼图
- Highcharts 圆环图
- Highcharts 半圈圆环图
- Highcharts 向下钻取饼图
- Highcharts 渐变饼图
- Highcharts 单色饼图
- Highcharts 散点图
- Highcharts 气泡图
- Highcharts 动态图
- Highcharts 组合图
- Highcharts 柱形图,线条图,饼图组合
- Highcharts 双Y轴, 柱形图,线条图组合
- Highcharts 多Y轴组合
- Highcharts 散点图上添加回归线
- Highcharts 3D图
- Highcharts 3D柱形图
- Highcharts 带空值(null)和0的3D柱形图
- Highcharts 堆叠3D柱形图
- Highcharts 3D饼图
- Highcharts 3D圆环图
- Highcharts 测量图
- Highcharts 测量图
- Highcharts 圆形进度条式测量图
- Highcharts 时钟
- Highcharts 双轴车速表
- Highcharts 音量表(VU Meter)
- Highcharts 树状图(Treemap)