Highcharts图表之测量图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts 实例 | web建站教程(ipkd.cn)</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/highcharts.js"></script>
    <script src="/js/highcharts-more.js"></script>
</head>
<body>
    <div id="myChart" width='100%' height='450'></div>
    <script type="text/javascript">
       $(document).ready(function() {  
           var chart = {      
              type: 'gauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false
           };
           var title = {
              text: '时速表'   
           };     
        
           var pane = {
              startAngle: -150,
              endAngle: 150,
              background: [{
                 backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                       [0, '#FFF'],
                       [1, '#333']
                    ]
                 },
                 borderWidth: 0,
                 outerRadius: '109%'
              }, {
                 backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                       [0, '#333'],
                       [1, '#FFF']
                    ]
                 },
                 borderWidth: 1,
                 outerRadius: '107%'
             }, {
                 // default background
             }, {
                 backgroundColor: '#DDD',
                 borderWidth: 0,
                 outerRadius: '105%',
                 innerRadius: '103%'
             }]
           };
        
           // the value axis
           var yAxis = {
              min: 0,
              max: 200,
        
              minorTickInterval: 'auto',
              minorTickWidth: 1,
              minorTickLength: 10,
              minorTickPosition: 'inside',
              minorTickColor: '#666',
        
              tickPixelInterval: 30,
              tickWidth: 2,
              tickPosition: 'inside',
              tickLength: 10,
              tickColor: '#666',
              labels: {
                 step: 2,
                 rotation: 'auto'
              },
              title: {
                 text: 'km/h'
              },
              plotBands: [{
                 from: 0,
                 to: 120,
                 color: '#55BF3B' // green
              }, {
                 from: 120,
                 to: 160,
                 color: '#DDDF0D' // yellow
              }, {
                 from: 160,
                 to: 200,
                 color: '#DF5353' // red
              }]
           };
        
           var series= [{
                name: 'Speed',
                data: [80],
                tooltip: {
                   valueSuffix: ' km/h'
                }
           }];     
              
           var json = {};   
           json.chart = chart; 
           json.title = title;       
           json.pane = pane; 
           json.yAxis = yAxis; 
           json.series = series;     
           
           // Add some life
           var chartFunction = function (chart) {
              if (!chart.renderer.forExport) {
                 setInterval(function () {
                 var point = chart.series[0].points[0], newVal, inc = Math.round((Math.random() - 0.5) * 20);
                 newVal = point.y + inc;
                 if (newVal < 0 || newVal > 200) {
                    newVal = point.y - inc;
                 }
                 point.update(newVal);
                 }, 3000);
              }
           };
           
           $('#myChart').highcharts(json,chartFunction);
        });
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：