非常教程

Highcharts 教程教程

Highcharts 时钟

Highcharts 时钟

Highcharts 时钟

Highcharts 时钟

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>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 非常教程(verydoc.net)</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>

以上实例输出结果为:

Highcharts 时钟

Highcharts 测量图

Highcharts 时钟
Highcharts 教程

Highcharts 是一个用纯JavaScript编写的一个图表库

Highcharts 教程目录

1.Highcharts 带有数据标签曲线图表
2.Highcharts 基本曲线图
3.Highcharts 曲线图
4.Highcharts 配置语法
5.Highcharts 环境配置
6.Highcharts 区域图
7.Highcharts 对数图表
8.Highcharts 时间间隔图表
9.Highcharts 标示区曲线图
10.Highcharts 带标记曲线图
11.Highcharts X 轴翻转曲线图
12.Highcharts 时间序列,可缩放的图表
13.Highcharts 异步加载数据曲线图表
14.Highcharts 条形图
15.Highcharts 使用区间和线的区域图
16.Highcharts 区间区域图
17.Highcharts 曲线区域图
18.Highcharts 反转x轴与y轴
19.Highcharts 丢失值区域图
20.Highcharts 百分比堆叠区域图
21.Highcharts 堆叠区域图
22.Highcharts 使用负数区域图
23.Highcharts 基本区域图
24.Highcharts 堆叠组柱形图
25.Highcharts 标签旋转柱形图
26.Highcharts 使用百分比的堆叠柱形图
27.Highcharts 堆叠柱形图
28.Highcharts 使用负值的反向柱形图
29.Highcharts 基本柱形图
30.Highcharts 柱形图
31.Highcharts 反向条形图
32.Highcharts 堆叠条形图
33.Highcharts 基本条形图
34.Highcharts 圆环图
35.Highcharts 显示图例饼图
36.Highcharts 配置选项详细说明
37.Highcharts 基本饼图
38.Highcharts 饼图
39.Highcharts 区间柱形图
40.Highcharts 使用 HTML 表格数据的柱形图
41.Highcharts 固定布局柱形图
42.Highcharts 堆叠组柱形图
43.Highcharts 双Y轴, 柱形图,线条图组合
44.Highcharts 柱形图,线条图,饼图组合
45.Highcharts 组合图
46.Highcharts 动态图
47.Highcharts 气泡图
48.Highcharts 散点图
49.Highcharts 单色饼图
50.Highcharts 渐变饼图
51.Highcharts 向下钻取饼图
52.Highcharts 半圈圆环图
53.Highcharts 测量图
54.Highcharts 3D圆环图
55.Highcharts 3D饼图
56.Highcharts 堆叠3D柱形图
57.Highcharts 带空值(null)和0的3D柱形图
58.Highcharts 3D柱形图
59.Highcharts 3D图
60.Highcharts 散点图上添加回归线
61.Highcharts 多Y轴组合
62.Highcharts 树状图(Treemap)
63.Highcharts 热点图
64.Highcharts 音量表(VU Meter)
65.Highcharts 双轴车速表
66.Highcharts 时钟
67.Highcharts 圆形进度条式测量图
68.Highcharts 测量图