代码信息

保存到分组
外部资源
$[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

/*
本例子的目的是为了演示通过 Dom 事件、Highcharts 事件、Highcharts API 来讲一个页面中的多个图表进行联动的。
本例通过循环创建类似的图表并绑定鼠标的滑动事件来对多个图表进行演示联动效果。
*/
$(function () {
	/**
     * 为了让多个图表的提示框即十字准星线能够联动，这里绑定多个图表的附件 dom 的鼠标事件进行联动
     */
	$('#container').bind('mousemove touchmove touchstart', function (e) {
		var chart,
			point,
			i,
			event;
		for (i = 0; i < Highcharts.charts.length; i = i + 1) {
			chart = Highcharts.charts[i];
			event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
			point = chart.series[0].searchPoint(event, true); // Get the hovered point
			if (point) {
				point.highlight(e);
			}
		}
	});
	// 去掉当前数据点的高亮，并隐藏鼠标滑动状态以及十字准星线
	$('#container').bind('mouseout touchend touchleave ', function (e) {
		var chart, i;
		for (i = 0; i < Highcharts.charts.length; i = i + 1) {
			chart = Highcharts.charts[i];
			chart.xAxis[0].hideCrosshair() // 隐藏十字准星线
			chart.pointer.chart.hoverPoints[0].onMouseOut() // 去掉鼠标状态
		}
	})
	/**
     * 重写内部的方法， 这里是将提示框即十字准星的隐藏函数关闭
     */
	Highcharts.Pointer.prototype.reset = function () {
		return undefined;
	};
	/**
     * 高亮当前的数据点，并设置鼠标滑动状态及绘制十字准星线
     */
	Highcharts.Point.prototype.highlight = function (event) {
		this.onMouseOver(); // 显示鼠标激活标识
		this.series.chart.tooltip.refresh(this); // 显示提示框
		this.series.chart.xAxis[0].drawCrosshair(event, this); // 显示十字准星线
	};
	/**
     * 同步缩放效果，即当一个图表进行了缩放效果，其他图表也进行缩放
     */
	function syncExtremes(e) {
		var thisChart = this.chart;
		if (e.trigger !== 'syncExtremes') { 
			Highcharts.each(Highcharts.charts, function (chart) {
				if (chart !== thisChart) {
					if (chart.xAxis[0].setExtremes) { 
						chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
					}
				}
			});
		}
	}
	// 获取 JSON 数据，数据文件地址：
	//https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
	$.getJSON('https://data.jianshukeji.com/jsonp?filename=json/activity.json&callback=?', function (activity) {
		$.each(activity.datasets, function (i, dataset) {
			// 添加 X 数据
			dataset.data = Highcharts.map(dataset.data, function (val, j) {
				return [activity.xData[j], val];
			});
			$('<div class="chart">')
				.appendTo('#container')
				.highcharts({
				chart: {
					marginLeft: 40, // Keep all charts left aligned
					spacingTop: 20,
					spacingBottom: 20,
					zoomType: 'x'
				},
				title: {
					text: dataset.name,
					align: 'left',
					margin: 0,
					x: 30
				},
				credits: {
					enabled: false
				},
				legend: {
					enabled: false
				},
				xAxis: {
					crosshair: true,
					events: {
						setExtremes: syncExtremes
					},
					labels: {
						format: '{value} km'
					}
				},
				yAxis: {
					title: {
						text: null
					}
				},
				tooltip: {
					positioner: function () {
						return {
							x: this.chart.chartWidth - this.label.width, // right aligned
							y: -1 // align to title
						};
					},
					borderWidth: 0,
					backgroundColor: 'none',
					pointFormat: '{point.y}',
					headerFormat: '',
					shadow: false,
					style: {
						fontSize: '18px'
					},
					valueDecimals: dataset.valueDecimals
				},
				series: [{
					data: dataset.data,
					name: dataset.name,
					type: dataset.type,
					color: Highcharts.getOptions().colors[i],
					fillOpacity: 0.3,
					tooltip: {
						valueSuffix: ' ' + dataset.unit
					}
				}]
			});
		});
	});
});

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

.chart {
	min-width: 320px;
	max-width: 800px;
	height: 220px;
	margin: 0 auto;
}

{"resource":"1,3,5,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"YOp6D7","name":"多个图表联动","version":0,"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":2260,"group":{"id":2260,"name":"临时分组","code":"temp"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

多个图表联动 | JShare

模板（查看所有模板）

外部资源
$[libs.length]