highcharts实现组织机构的点击选中和取消选中事件

Posted janken

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了highcharts实现组织机构的点击选中和取消选中事件相关的知识,希望对你有一定的参考价值。

代码

Highcharts.chart(‘container‘, {
	chart: {
		height: 600,
		inverted: true
	},
	title: {
		text: ‘Highsoft 公司组织结构‘
	},
	plotOptions: {
		series: {
			cursor: ‘pointer‘,
			events: {
				click: function (event) {
					let nodes = this.nodes;
					for(let p in nodes){
						if(nodes[p].selected){
							nodes[p].select();
							break;
						}
					}
					event.point.select();
					console.log(event.point.id + " : " +event.point.name);
				}
			}
		}
	},
	series: [{
		type: ‘organization‘,
		name: ‘Highsoft‘,
		keys: [‘from‘, ‘to‘],
		data: [
			[‘股东‘, ‘董事会‘],
			[‘董事会‘, ‘CEO‘],
			[‘CEO‘, ‘CTO‘],
			[‘CEO‘, ‘CPO‘],
			[‘CEO‘, ‘CSO‘],
			[‘CEO‘, ‘CMO‘],
			[‘CEO‘, ‘HR‘],
			[‘CTO‘, ‘Product‘],
			[‘CTO‘, ‘Web‘],
			[‘CSO‘, ‘Sales‘],
			[‘CMO‘, ‘Market‘]
		],
		nodes: [ {
			id: ‘CEO‘,
			title: ‘CEO‘,
			name: ‘Grethe Hjetland‘,
			image: ‘https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132317/Grethe.jpg‘
		}, {
			id: ‘HR‘,
			title: ‘HR/CFO‘,
			name: ‘Anne Jorunn Fjærestad‘,
			color: ‘#007ad0‘,
			image: ‘https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132314/AnneJorunn.jpg‘,
			column: 3,
			offset: ‘100%‘
		}, {
			id: ‘CTO‘,
			title: ‘CTO‘,
			name: ‘Christer Vasseng‘,
			column: 4,
			image: ‘https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12140620/Christer.jpg‘,
			layout: ‘hanging‘
		}, {
			id: ‘CPO‘,
			title: ‘CPO‘,
			name: ‘Torstein Hønsi‘,
			column: 4,
			image: ‘https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12131849/Torstein1.jpg‘
		}, {
			id: ‘CSO‘,
			title: ‘CSO‘,
			name: ‘Anita Nesse‘,
			column: 4,
			image: ‘https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/12132313/Anita.jpg‘,
			layout: ‘hanging‘
		}, {
			id: ‘CMO‘,
			title: ‘CMO‘,
			name: ‘Vidar Brekke‘,
			column: 4,
			image: ‘https://wp-assets.highcharts.com/www-highcharts-com/blog/wp-content/uploads/2018/11/13105551/Vidar.jpg‘,
			layout: ‘hanging‘
		}, {
			id: ‘Product‘,
			name: ‘产品研发‘
		}, {
			id: ‘Web‘,
			name: ‘运维‘,
			description: ‘网站开发,系统维护‘
		}, {
			id: ‘Sales‘,
			name: ‘销售部‘
		}, {
			id: ‘Market‘,
			name: ‘市场部‘
		}],
		colorByPoint: false,
		color: ‘#007ad0‘,
		dataLabels: {
			color: ‘white‘
		},
		borderColor: ‘white‘,
		nodeWidth: 65
	}],
	tooltip: {
		outside: true
	},
	exporting: {
		allowhtml: true,
		sourceWidth: 800,
		sourceHeight: 600
	}
});

  效果

技术图片

以上是关于highcharts实现组织机构的点击选中和取消选中事件的主要内容,如果未能解决你的问题,请参考以下文章

Vue实现div的多选功能(实际效果就是可以点击选中,再点击取消)

点击 实现全选 再次点击 实现取消选中状态

jquery实现 点击复选框,勾选所有复选框,再次点击取消勾选,这个功能怎么实现?

点击后问卷单选按钮取消选中

微信小程序 全选和取消全选

jquery实现全选 我全选后,取消全选,再点击全选,却选不上。我手动选上,然后点击取消全选,能够取消。