代码信息

保存到分组
外部资源
$[libs.length]
暂无
- $[lib.showName]
添加新的资源

$[newLibMessage]

更多文件见开放CDN服务
快捷键
快捷键风格同 Sublime，同时支持 Emmet 特性，常用快捷键：

全局快捷键
- Ctrl + Enter：运行
- Ctrl + ←/→：折叠左侧菜单
- Ctrl + O：打开添加常用资源
- Ctrl + Z：撤销所有编辑器
- Ctrl + U：恢复所有编辑器
- F11：最大化运行结果
- ESC：关闭添加常用资源
编辑器快捷键
- Ctrl + Enter：运行
- Ctrl + /：注释代码
- Ctrl + H：格式化代码
- Ctrl + Z：撤销
- Ctrl + Y：恢复
- Tab：快捷生成代码
- Ctrl + L：选中当前行
- Ctrl + Q：折叠当前代码
- F11：最大化当前编辑器
关于

JShare 是一个在线代码测试、托管、分享的工具；

当前版本 $[base.version]，这里有更新日志；

使用前请查阅帮助文档及说明；

Copyright © 2020 JShare，由简数科技提供服务，浙ICP备16004892号-3

仪表图自定义指针样式 | JShare

通过重写内部方法实现自定义指针样式

let each = Highcharts.each,
	merge = Highcharts.merge,
	pInt = Highcharts.pInt,
	isNumber = Highcharts.isNumber,
	pick = Highcharts.pick;
Highcharts.seriesTypes.gauge.prototype.translate = function () {
	var series = this,
		yAxis = series.yAxis,
		options = series.options,
		center = yAxis.center;
	series.generatePoints();
	each(series.points, function (point) {
		var dialOptions = merge(options.dial, point.dial),
			radius = (pInt(pick(dialOptions.radius, 80)) * center[2]) /
			200,
			baseLength = (pInt(pick(dialOptions.baseLength, 70)) * radius) /
			100,
			rearLength = (pInt(pick(dialOptions.rearLength, 10)) * radius) /
			100,
			baseWidth = dialOptions.baseWidth || 3,
			overshoot = options.overshoot,
			rotation = yAxis.startAngleRad +
			yAxis.translate(point.y, null, null, null, true);
		// Handle the wrap and overshoot options
		if (isNumber(overshoot)) {
			overshoot = overshoot / 180 * Math.PI;
			rotation = Math.max(
				yAxis.startAngleRad - overshoot,
				Math.min(yAxis.endAngleRad + overshoot, rotation)
			);
		} else if (options.wrap === false) {
			rotation = Math.max(
				yAxis.startAngleRad,
				Math.min(yAxis.endAngleRad, rotation)
			);
		}
		rotation = rotation * 180 / Math.PI;
		point.shapeType = 'path';
		// 主要修改了这里，自定义指针 path
		point.shapeArgs = {
			d: dialOptions.path || [
				'M',
				-rearLength, -baseWidth / 2,
				'L',
				baseLength, -baseWidth / 2,
				radius, 0,
				//radius, topWidth / 2,
				baseLength, baseWidth / 2,
				-rearLength, baseWidth / 2,
				-rearLength - baseWidth + 2, 0,
				'z'
			],
			translateX: center[0],
			translateY: center[1],
			rotation: rotation
		};
		// Positions for data label
		point.plotX = center[0];
		point.plotY = center[1];
	});
};
var stops = [
	[0, '#00ff00'],
	[0.5, '#ffff00'],
	[1, '#ff0000']
],
	max = 200;
function getColor(val) {
	let pos = val / max,
		i = stops.length -1,
		startStop,
		endStop;
	for(; i >= 0; i--) {
		if(stops[i][0] <pos) {
			startStop = stops[i];
			endStop = stops[i +1];
			break;
		}
	}
	pos = (pos - startStop[0]) / (endStop[0] - startStop[0]);
	return new Highcharts.Color(startStop[1]).tweenTo(new Highcharts.Color(endStop[1]), pos);
}
var chart = Highcharts.chart('container',{
	chart: {
		type: 'gauge',
		plotBackgroundColor: null,
		plotBorderWidth: 0,
		plotShadow: false,
		spacing: 0,
		margin: -20
	},
	title: {
		text: null
	},
	pane: {
		startAngle: -120,
		endAngle: 120,
		background: [{
			backgroundColor: null,
			borderWidth: 0
		}]
	},
	yAxis: {
		lineWidth: 0,
		minorTickInterval: null,
		tickPixelInterval: 400,
		tickWidth: 0,
		title: {
			y: -70
		},
		labels: {
			y: 16
		},
		min: 0,
		max: 200,
		minorTickWidth: 1,
		minorTickLength: 5,
		tickPixelInterval: 30,
		minorTickPosition: 'inside',
		minorTickColor: '#ccc',
		tickWidth: 1,
		tickLegnth: 10,
		offset: -10,
		lineWidth: 0,
		labels: {
			step: 2,
			rotation: 'auto'
		},
		title: {
			text: null
		},
		plotBands: [{
			from: 0,
			to: 200,
			color:  {
				linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 },
				stops: stops
			}
		}]
	},
	tooltip: {
		enabled: false
	},
	series: [{
		name: 'Speed',
		data: [120],
		dataLabels: {
			format: '{y} km/h',
			borderWidth: 0
		},
		dial: {
			backgroundColor: '#00ff00',
			radius: '70%', // 指针半径
			baseLength: '10%', // 指针长度 
			baseWidth: 13, // 宽度
			rearLength: 0 // 尾部长度
		},
		pivot: { // 指针中心圆点
			radius: 2, // 半径
			backgroundColor: '#fff' // 背景颜色
		}
	}]
}, function (chart) {
	if (!chart.renderer.forExport) {
		setInterval(function () {
			var point = chart.series[0].points[0],
				newVal,
				inc = Math.round((Math.random() - 0.5) * 50);
			newVal = point.y + inc;
			if (newVal < 0 || newVal > 200) {
				newVal = point.y - inc;
			}
			let color = getColor(newVal);
			point.update({
				y: newVal,
				fill: color
			});
			point.graphic.attr({
				fill: color
			});
		}, 1000);
	}
});

<div id="container"></div>

#container {
	min-width: 310px; 
	max-width: 400px; 
	height: 300px; 
	margin: 0 auto;
	background:#ccc;
	border: 1px solid #ccc;
}

{"resource":"3,5,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"hhhhi0","name":"仪表图自定义指针样式","version":35,"doctype":0,"description":"通过重写内部方法实现自定义指针样式","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">","newGroup":8,"group":{"id":8,"name":"demos","code":"demos"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

仪表图自定义指针样式 | JShare

通过重写内部方法实现自定义指针样式

模板（查看所有模板）

外部资源
$[libs.length]