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

代码编辑器：

<!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="https://cdn.hcharts.cn/highcharts/modules/solid-gauge.js"></script>
<div style="width: 580px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 290px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 290px; height: 200px; float: left"></div>
</div>
<script> 
var chart = {      
   type: 'solidgauge'
};
var title = null;

var pane = {
   center: ['50%', '85%'],
   size: '140%',
   startAngle: -90,
   endAngle: 90,
   background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
   }
};

var tooltip = {
   enabled: false
};
   
// the value axis
var yAxis = {
   stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
   ],
   lineWidth: 0,
   minorTickInterval: null,
   tickPixelInterval: 400,
   tickWidth: 0,
   title: {
      y: -70
   },
   labels: {
      y: 16
   },
      min: 0,
   max: 200,
   title: {
      text: 'Speed'
   }
};

var plotOptions = {
   solidgauge: {
      dataLabels: {
         y: 5,
         borderWidth: 0,
         useHTML: true
      }
   }
};

var credits = {
   enabled: false
};

var options = {};

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

var chart1 = Highcharts.chart('container-speed',options);

// the value axis
yAxis = {
   stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
   ],
   lineWidth: 0,
   minorTickInterval: null,
   tickPixelInterval: 400,
   tickWidth: 0,
   title: {
      y: -70
   },
   labels: {
      y: 16
   },
      min: 0,
   max: 5,
   title: {
      text: 'RPM'
   }
};

series = [{
   name: 'RPM',
   data: [1],
   dataLabels: {
      format: '<div style="text-align:center"><span style="font-size:25px;color:' +
      ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
      '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
   },
   tooltip: {
      valueSuffix: ' revolutions/min'
   }
}];

var chart2;
      
var chartFunction = function() {
   
   var point;
   var newVal;
   var inc;

if (chart1) {
      point = chart1.series[0].points[0];
      inc = Math.round((Math.random() - 0.5) * 100);
      newVal = point.y + inc;

if (newVal < 0 || newVal > 200) {
         newVal = point.y - inc;
      }
      point.update(newVal);
   }

if (chart2) {
      point = chart2.series[0].points[0];
      inc = Math.random() - 0.5;
      newVal = point.y + inc;

if (newVal < 0 || newVal > 5) {
         newVal = point.y - inc;
      }

point.update(newVal);
   }
};

// Bring life to the dials
setInterval(chartFunction, 2000);

options.yAxis = yAxis;
options.series = series;

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

代码编辑器：

运行结果：