首页 | 简单教程,简单编程

代码编辑器：

<!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 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>

代码编辑器：

运行结果：