双刻度仪表图 | JShare

var chart = Highcharts.chart('container', {
		chart: {
				type: 'gauge',
				alignTicks: false,
				plotBackgroundColor: null,
				plotBackgroundImage: null,
				plotBorderWidth: 0,
				plotShadow: false
		},
		title: {
				text: '双刻度仪表图'
		},
		pane: {
				startAngle: -150,
				endAngle: 150
		},
		yAxis: [{
				min: 0,
				max: 200,
				lineColor: '#339',
				tickColor: '#339',
				minorTickColor: '#339',
				offset: -25,
				lineWidth: 2,
				labels: {
						distance: -20,
						rotation: 'auto'
				},
				tickLength: 5,
				minorTickLength: 5,
				endOnTick: false
		}, {
				min: 0,
				max: 124,
				tickPosition: 'outside',
				lineColor: '#933',
				lineWidth: 2,
				minorTickPosition: 'outside',
				tickColor: '#933',
				minorTickColor: '#933',
				tickLength: 5,
				minorTickLength: 5,
				labels: {
						distance: 12,
						rotation: 'auto'
				},
				offset: -20,
				endOnTick: false
		}],
		series: [{
				name: '速度',
				data: [80],
				dataLabels: {
						formatter: function () {
								var kmh = this.y,
										mph = Math.round(kmh * 0.621);
								return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
										'<span style="color:#933">' + mph + ' mph</span>';
						},
						backgroundColor: {
								linearGradient: {
										x1: 0,
										y1: 0,
										x2: 0,
										y2: 1
								},
								stops: [
										[0, '#DDD'],
										[1, '#FFF']
								]
						}
				},
				tooltip: {
						valueSuffix: ' km/h'
				}
		}]
},function (chart) {
		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);
});

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

{"doctype":0,"resouces":"3,5,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

双刻度仪表图 | JShare

模板（查看所有模板）