代码信息

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

tooltip多列显示 | JShare

通过设置tooltip输出格式来实现tooltip多列显示，解决因数据条数过多导致的数据显示不全问题。

$(function () {
	$('#container').highcharts({
		tooltip:{
			shared:true,
			useHTML: true,
			formatter: function(){
				let tmp = '';
				let length = this.points.length;//数据条数，this.points获取的是当前x轴刻度上的数据信息
				let rowCount = 10;//一列允许的最大行数
				let lineCount = parseInt(length / rowCount) + 1;//列数
				tmp += '<table>';
				for (let i = 0; i < rowCount; i++) {
					tmp += '<tr>';
					for (let j = 0; j < lineCount && j * rowCount + i  < length; j++) {
						let it = this.points[j * rowCount + i];
						tmp += "<td style='padding-right: 20px'><span style='color:" + it.color + "'>● </span>" + it.series.name + ":<span style='font-weight: bold'>" + it.y + "</span></td>";
					}
					tmp += '</tr>';
				}
				tmp += '</table>';
				return tmp;
			}
		},
		xAxis: {
			categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		},
		series: series()
	});
});
//获取数据
function series() {
	let arr = [];
	for (let i = 0; i < 35; i++) {
		let data = [];
		for (let j = 0; j < 7; j++) {
			data.push(parseInt(Math.random() * 100));
		}
		arr.push({data: data, name: '数据' + (i + 1), visible:i<10});
	}
	return arr;
}

<script type="text/javascript" src="http://static.hcharts.cn/js/ui/jquery-ui.min.js"></script>
<div id="container" style="min-width:400px;height:400px;"></div>

{"resource":"2,3","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"tdGrX0","name":"tooltip多列显示","version":0,"doctype":0,"description":"通过设置tooltip输出格式来实现tooltip多列显示，解决因数据条数过多导致的数据显示不全问题。","meta":"","newGroup":2260,"group":{"id":2260,"name":"临时分组","code":"temp"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

tooltip多列显示 | JShare

通过设置tooltip输出格式来实现tooltip多列显示，解决因数据条数过多导致的数据显示不全问题。

模板（查看所有模板）

外部资源
$[libs.length]