Chart.js图例 - 拆分为两个并单独显示？

Question

有没有办法将Chart.js图例分成两组数据集并将它们分开放置（或者用分隔符或其他东西）？

我有很多数据集，它们分为两组 - 我们的公司数据集和更广泛的研究数据集。我希望能够轻松地将我们的数据与更广泛的研究进行比较。我认为如果有两个单独的传说会更容易。

这就是我正在做的事情......

＆＃13;

＆＃13;

.csproj

＆＃13;

var allData = [5.36,4.75,5.64,5.82,5.43,5.34,7.05,6.50,5.91,5.52,4.66,5.30,4.75,4.41,4.66,5.70,5.34,6.52,5.48,5.43,5.55,6.18,6.14,5.45];
		var femaleData = [5.33,5.17,5.44,5.44,5.61,5.61,6.67,6.22,5.83,5.61,4.56,4.67,5.61,4.28,4.11,5.83,5.61,6.33,5.50,5.56,6.22,5.94,5.72,4.83];
		var maleData = [5.38,4.46,5.77,6.08,5.31,5.15,7.31,6.69,5.96,5.46,4.73,5.73,4.15,4.50,5.04,5.62,5.15,6.65,5.46,5.35,5.08,6.35,6.42,5.88];
		// function1Data is G&A
		var function1Data = [5.18,5.18,6.09,5.09,5.36,5.09,6.45,6.55,5.36,5.64,4.55,5.09,4.82,4.55,4.91,6.00,5.91,5.64,5.45,5.27,6.27,5.73,5.64,4.82];
		// function2Data is Sales & Service
		var function2Data = [5.63,4.50,5.56,5.88,5.63,6.13,7.19,6.75,5.75,5.69,4.88,5.44,4.75,4.44,4.31,5.94,5.06,6.63,5.44,5.75,5.25,6.50,6.50,5.63];
		// function3Data is tech
		var function3Data = [5.24,4.71,5.41,6.24,5.29,4.76,7.29,6.24,6.41,5.29,4.53,5.29,4.71,4.29,4.82,5.29,5.24,7.00,5.53,5.24,5.35,6.18,6.12,5.71];
		// function4Data is dev
		var program1Data = [5.08,4.54,5.58,5.58,5.42,5.29,7.13,6.58,5.63,5.54,4.58,4.79,4.88,4.54,4.46,6.04,5.04,6.67,5.75,5.33,5.33,6.46,5.96,5.00];
		var program2Data = [5.21,4.58,5.89,5.58,5.42,5.32,6.89,6.53,5.68,5.42,4.58,5.37,4.47,4.32,4.79,5.84,5.32,6.26,5.68,5.47,5.32,6.21,6.16,5.37];
		// service1Data is 0-50
		var service1Data = [5.50,4.58,5.67,5.50,5.50,5.25,7.00,6.75,5.67,5.58,4.92,5.50,4.67,4.33,5.25,5.42,5.33,6.33,4.92,5.50,5.42,6.17,6.17,5.67];
		// service2Data is 51-80
		var service2Data = [4.90,5.20,5.90,5.60,5.40,5.00,7.20,6.10,5.60,5.00,4.30,5.00,4.90,4.50,4.00,5.60,5.90,6.20,5.90,5.10,5.70,5.80,5.80,4.50];
		// service3Data is 81-100		
		var service3Data = [6.25,4.42,5.67,6.08,5.00,5.83,7.08,6.42,6.08,6.33,4.50,5.67,4.75,4.25,4.17,5.17,4.83,6.67,5.08,4.92,5.17,6.50,6.58,5.42];
		// service4Data is 101-154
		var service4Data = [4.60,4.90,5.30,6.10,5.90,5.20,6.90,6.70,6.30,5.00,4.90,4.90,4.70,4.60,5.20,6.80,5.40,6.90,6.20,6.30,6.00,6.20,5.90,6.20];
		// role1Data is 0-4
		var role1Data = [5.33,4.67,5.75,6.50,5.17,4.75,7.42,6.75,6.33,5.42,4.50,6.08,4.17,4.50,4.83,5.42,5.08,6.83,5.83,5.17,5.50,6.50,6.58,6.08];
		// role2Data is 5-18
		var role2Data = [5.27,5.09,5.45,5.64,5.64,6.18,7.18,6.27,5.64,4.91,4.82,5.09,4.73,4.36,4.73,5.82,5.91,6.64,5.36,5.45,5.73,5.73,5.73,5.27];
		// role3Data is 19-32		
		var role3Data = [4.78,4.67,6.56,5.22,6.44,4.78,7.00,6.78,5.78,5.56,5.22,4.89,4.56,4.11,4.22,5.89,5.22,5.44,6.44,6.78,6.00,6.33,6.22,5.33];
		// role4Data is 33-60
		var role4Data = [5.50,5.00,5.67,5.58,5.25,5.00,6.50,5.83,5.75,5.83,4.58,5.00,5.08,4.75,4.67,5.58,5.58,6.25,5.25,5.25,5.33,5.83,5.75,5.08];
		
		// data from research for global norms/profiles
		
				// sds realistic high	
		var norm1Data = [5.7,5.4,5.7,6.0,4.5,5.2,5.5,5.2,5.9,6.2,4.4,5.7,4.5,6.1,5.9,5.6,5.3,5.9,5.2,4.8,5.3];

		// sds realistic low	
		var norm2Data = [6.1,6.2,4.4,5.2,4.7,6.4,5.4,5.2,5.1,6.0,4.5,5.1,7.2,5.9,6.0,5.1,6.7,5.5,5.2,5.1,5.9];

		// sds investigative high
		var norm3Data = [5.2,5.8,5.4,5.5,4.4,4.8,6.5,5.1,5.4,5.6,4.5,5.3,5.1,5.8,6.5,5.7,5.8,5.8,5.8,4.6,5.2];

		// sds investigative low
		var norm4Data = [6.5,6.0,4.8,5.4,4.6,6.7,4.7,5.6,5.4,6.7,4.5,5.7,6.7,5.8,5.7,5.1,6.1,5.2,5.0,5.0,5.9];

		// sds social high
		var norm5Data = [6.9,5.6,4.4,6.3,4.4,6.9,5.4,5.3,5.8,6.8,4.5,6.6,5.9,5.9,6.2,4.8,5.9,6.4,4.9,5.0,5.0];

		// sds social low
		var norm6Data = [4.1,6.4,6.0,4.6,4.8,3.6,5.9,5.0,4.7,5.4,4.5,4.0,5.4,6.3,5.8,6.6,6.1,5.1,6.3,5.0,6.0];

		// sds enterprising high
		var norm7Data = [6.7,5.6,4.8,6.9,4.4,6.6,5.2,5.7,6.8,6.9,4.4,6.6,5.3,6.2,6.2,5.1,5.3,6.3,5.0,5.1,5.6];

		// sds enterprising low
		var norm8Data = [4.6,6.6,4.8,4.5,4.2,4.4,5.5,4.6,4.2,5.4,4.1,4.1,6.7,6.1,6.4,5.9,6.7,5.7,6.1,4.3,5.7];

		// sds conventional high
		var norm9Data = [5.8,5.7,5.8,5.5,5.4,5.8,5.4,5.7,5.6,6.1,5.0,5.4,5.4,5.8,5.0,5.5,6.0,5.3,5.4,5.8,5.5];

		// sds conventional low
		var norm10Data = [6.1,5.8,4.4,5.9,3.9,5.9,5.2,5.4,5.7,6.3,3.9,5.5,6.3,6.0,6.6,5.0,5.8,6.3,5.3,4.4,5.6];

		// corporate
		var norm11Data = [6.1,5.0,5.5,5.8,5.9,6.5,7.4,5.0,6.0,5.5,5.9,6.1,5.2,4.1,4.7,5.2,5.1,6.0,5.1,5.5,5.1];

		// engineers
		var norm12Data = [5.3,5.9,5.4,5.6,5.0,5.3,7.8,4.6,5.5,5.5,4.9,5.4,4.8,5.4,6.0,5.5,5.5,6.2,5.9,5.2,5.6];

		// scientists
		var norm13Data = [4.5,5.4,4.8,5.4,4.6,4.5,8.3,4.8,5.0,4.8,4.3,5.0,5.4,5.1,6.5,5.8,5.0,6.9,6.7,4.9,5.3];

		// emotional expressivity high
		var norm14Data = [7.3,5.8,4.6,6.2,5.2,7.1,6.6,5.6,5.9,6.9,4.3,6.4,6.0,5.4,6.1,4.5,6.0,6.0,4.2,5.0,5.9];

		// emotional expressivity low
		var norm15Data = [5.1,5.8,5.7,5.0,5.5,5.5,6.5,5.7,4.9,5.5,5.3,5.0,5.3,5.9,5.5,6.1,6.0,5.3,5.8,5.3,5.5];

		// emotional sensitivity high
		var norm16Data = [6.4,6.0,4.5,5.7,5.2,6.9,6.5,5.3,5.6,6.4,4.9,5.3,5.8,5.8,6.2,5.3,6.4,6.1,5.0,4.9,5.6];

		// emotional sensitivity low
		var norm17Data = [5.2,5.5,6.1,5.1,5.3,5.2,6.3,5.8,5.2,5.7,5.3,5.2,5.1,5.8,5.3,6.1,5.6,5.0,5.6,5.3,5.6];

		// emotional control high
		var norm18Data = [5.4,5.5,4.0,5.7,5.9,5.5,6.6,5.6,5.5,5.9,4.7,5.4,5.7,5.6,6.2,6.2,5.5,6.1,5.6,5.1,5.5];

		// emotional control low
		var norm19Data = [6.1,5.8,5.4,5.4,5.2,6.4,6.4,5.6,5.4,6.1,5.2,5.6,5.6,5.5,5.4,5.3,6.2,5.4,5.2,5.1,5.6];

		// social expressivity high
		var norm20Data = [7.4,5.4,4.7,6.0,4.9,7.0,6.5,5.6,5.5,7.3,4.5,6.7,5.7,5.2,5.8,4.6,5.8,6.2,4.1,4.9,5.5];

		// social expressivity low
		var norm21Data = [4.8,5.8,5.9,4.9,5.8,5.2,6.6,5.6,4.9,5.1,5.2,4.8,5.3,5.8,5.5,6.2,5.9,5.1,6.0,5.3,5.6];

		// social sensitivity high
		var norm22Data = [6.0,7.0,5.5,4.7,4.9,6.3,6.3,4.6,4.8,6.3,5.0,4.7,5.6,5.7,5.8,5.2,7.1,5.0,5.0,5.3,6.4];

		// social sensitivity low
		var norm23Data = [5.8,4.8,5.5,5.7,5.7,5.8,6.6,6.3,5.7,5.9,5.3,5.9,5.4,5.1,5.2,5.6,5.3,5.7,5.4,5.3,5.1];

		// social control high
		var norm24Data = [6.7,4.8,4.5,6.4,5.9,6.6,6.8,6.2,6.1,6.3,4.9,6.9,6.1,4.7,5.5,5.0,5.3,6.5,4.7,5.3,5.2];

		// social control low
		var norm25Data = [5.3,6.2,5.9,4.7,5.4,5.4,6.3,5.2,4.7,5.7,5.4,4.8,5.3,5.8,5.6,5.8,6.3,5.0,5.6,5.2,5.8];

		// empathy high
		var norm26Data = [7.0,5.1,4.2,5.9,4.3,6.9,6.4,6.1,5.4,7.1,4.5,6.3,6.2,5.0,6.1,5.1,5.8,6.6,4.5,4.7,5.0];

		// empathy low
		var norm27Data = [4.6,7.1,5.8,5.0,4.9,4.6,6.0,4.2,5.2,5.5,4.6,4.1,5.2,6.7,6.3,6.1,6.5,5.1,6.1,5.4,6.3];
		
		// high psych emotional
		var norm28Data = [5.9,3.7,5.7,5.9,6.0,5.8,6.1,7.2,5.8,5.3,5.9,6.2,5.2,5.2,4.7,5.3,3.6,5.8,5.0,5.7,4.7];
		
		// high psych social
		var norm29Data = [7.1,4.6,4.9,6.8,5.3,6.8,6.2,6.2,6.4,6.3,5.4,5.4,5.6,5.5,5.5,4.5,4.2,6.1,4.6,5.5,5.2];
		
		// high psych occupational
		var norm30Data = [5.8,4.5,5.7,5.3,5.8,6.0,5.9,6.5,5.2,5.3,6.0,5.6,5.3,5.2,5.0,5.5,4.6,5.5,5.0,5.4,5.0];
		
		// self-esteem high
		var norm31Data = [6.6,3.6,5.3,6.9,6.0,6.6,4.7,7.1,7.1,5.9,6.0,6.8,5.3,5.2,5.1,5.3,3.8,6.0,4.5,6.1,4.2];
		
		// self-esteem low
		var norm32Data = [4.9,6.8,5.5,4.9,5.0,5.1,4.2,4.2,4.7,5.3,5.2,4.6,5.5,6.8,6.7,6.0,6.3,5.0,5.9,5.4,5.6];

		
		
		var origin = 5.5;
		
		var factorLabelsResearch = [['Extraversion','Introverted • Extroverted'],['Anxiety','Low-Anxiety • High-Anxiety'],['Tough-Mindedness','Receptive • Tough-Minded'],['Independence','Accommodating • Independent'],['Self-Control','Unrestrained • Self-Controlled'],['Warmth (A)','Reserved • Warm'],['Reasoning (B)','Concrete • Absract'],['Emotional Stability (C)','Reactive • Emotionally Stable'],['Dominance (E)','Deferential • Dominant'],['Liveliness (F)','Serious • Lively'],['Rule-Consciousness (G)','Expedient • Rule-Conscious'],['Social Boldness (H)','Shy • Socially Bold'],['Sensitivity (I)','Utilitarian • Sensitive'],['Vigilance (L)','Trusting • Vigilant'],['Abstractedness (M)','Grounded • Abstracted'],['Privateness','Forthright • Private'],['Apprehension (O)','Self-Assured • Apprehensive'],['Openness to Change (Q1)','Traditional • Open to Change'],['Self-Reliant (Q2)','Group-Oriented • Self-Reliant'],['Perfectionism (Q3)','Tolerates Disorder • Perfectionistic'],['Tension (Q4)','Relaxed • Tense']];

	
		var globalProfiles = {
			labels: factorLabelsResearch,
			datasets: []};
			globalProfiles.datasets.push({
		        data: role1Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(79,143,0,.75)',
		        label: '0-4'
		    });
			globalProfiles.datasets.push({
		        data: role2Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(83, 134, 155,.75)',
		        label: '5-18'
		    });
			globalProfiles.datasets.push({
		        data: role3Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(182, 87, 56,.75)',
		        label: '19-32'
		    });
			globalProfiles.datasets.push({
		        data: role4Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: '33-60'
		    });
			globalProfiles.datasets.push({
		        data: service1Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(79,143,0,.75)',
		        label: '0-50'
		    });
			globalProfiles.datasets.push({
		        data: service2Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(83, 134, 155,.75)',
		        label: '51-80'
		    });
			globalProfiles.datasets.push({
		        data: service3Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(182, 87, 56,.75)',
		        label: '81-100'
		    });
			globalProfiles.datasets.push({
		        data: service4Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: '101-154'
		    });
			globalProfiles.datasets.push({
		        data: program1Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'green',
		        label: 'Program 1'
		    });
			globalProfiles.datasets.push({
		        data: program2Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'green',
		        label: 'Program 2'
		    });
			globalProfiles.datasets.push({
		        data: function1Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(83, 134, 155,.75)',
		        label: 'G&A'
		    });
			globalProfiles.datasets.push({
		        data: function2Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(182, 87, 56,.75)',
		        label: 'Sales & Service'
		    });
			globalProfiles.datasets.push({
		        data: function3Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'Technology'
		    });
			globalProfiles.datasets.push({
		        data: femaleData.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.75)',
		        label: 'Female'
		    });
			globalProfiles.datasets.push({
		        data: maleData.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.75)',
		        label: 'Male'
		    });
			globalProfiles.datasets.push({
		        data: allData.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'All'
		    });	    

			globalProfiles.datasets.push({
		        data: norm1Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.99)',
		        label: 'High Realistic'
		    });
			globalProfiles.datasets.push({
		        data: norm2Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.35)',
		        label: 'Low Realistic'
		    });
			globalProfiles.datasets.push({
		        data: norm3Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.75)',
		        label: 'High Investigative'
		    });
			globalProfiles.datasets.push({
		        data: norm4Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.15)',
		        label: 'Low Investigative'
		    });
			globalProfiles.datasets.push({
		        data: norm5Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.99)',
		        label: 'High Social'
		    });
			globalProfiles.datasets.push({
		        data: norm6Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.35)',
		        label: 'Low Social'
		    });
			globalProfiles.datasets.push({
		        data: norm7Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.75)',
		        label: 'High Enterprising'
		    });
			globalProfiles.datasets.push({
		        data: norm8Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.15)',
		        label: 'Low Enterprising'
		    });
			globalProfiles.datasets.push({
		        data: norm9Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(255,192,0,.99)',
		        label: 'High Conventional'
		    });
			globalProfiles.datasets.push({
		        data: norm10Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(255,192,0,.35)',
		        label: 'Low Conventional'
		    });
			globalProfiles.datasets.push({
		        data: norm11Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.85)',
		        label: 'Corporate'
		    });
			globalProfiles.datasets.push({
		        data: norm12Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.5)',
		        label: 'Engineers'
		    });
			globalProfiles.datasets.push({
		        data: norm13Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.25)',
		        label: 'Scientists'
		    });
			globalProfiles.datasets.push({
		        data: norm14Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.75)',
		        label: 'High Emotional Expressivity'
		    });
			globalProfiles.datasets.push({
		        data: norm15Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.75)',
		        label: 'Low Emotional Expressivity'
		    });
			globalProfiles.datasets.push({
		        data: norm16Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'High Emotional Sensitivity'
		    });	
			globalProfiles.datasets.push({
		        data: norm17Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(79,143,0,.75)',
		        label: 'Low Emotional Sensitivity'
		    });
			globalProfiles.datasets.push({
		        data: norm18Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(83, 134, 155,.75)',
		        label: 'High Emotional Control'
		    });
			globalProfiles.datasets.push({
		        data: norm19Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(182, 87, 56,.75)',
		        label: 'Low Emotional Control'
		    });
			globalProfiles.datasets.push({
		        data: norm20Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'High Social Expressivity'
		    });
			globalProfiles.datasets.push({
		        data: norm21Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(79,143,0,.75)',
		        label: 'Low Social Expressivity'
		    });
			globalProfiles.datasets.push({
		        data: norm22Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(83, 134, 155,.75)',
		        label: 'High Social Sensitivity'
		    });
			globalProfiles.datasets.push({
		        data: norm23Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(182, 87, 56,.75)',
		        label: 'Low Social Sensitivity'
		    });
			globalProfiles.datasets.push({
		        data: norm24Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'High Social Control'
		    });
			globalProfiles.datasets.push({
		        data: norm25Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'green',
		        label: 'Low Social Control'
		    });
			globalProfiles.datasets.push({
		        data: norm26Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'green',
		        label: 'High Empathy'
		    });
			globalProfiles.datasets.push({
		        data: norm27Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(83, 134, 155,.75)',
		        label: 'Low Empathy'
		    });
			globalProfiles.datasets.push({
		        data: norm28Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(182, 87, 56,.75)',
		        label: 'High Psych Emotional'
		    });
			globalProfiles.datasets.push({
		        data: norm29Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'High Psych Social'
		    });
			globalProfiles.datasets.push({
		        data: norm30Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(100,190,194,.75)',
		        label: 'High Psych Occupational'
		    });
			globalProfiles.datasets.push({
		        data: norm31Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(26,78,125,.75)',
		        label: 'High Self-Esteem'
		    });
			globalProfiles.datasets.push({
		        data: norm32Data.map(function(value) { return value-origin; }),
		        backgroundColor: 'rgba(103, 182, 93,.75)',
		        label: 'Low Self-Esteem'
		    });						

			
		var ctxGlobalProfiles = document.getElementById('global-profiles').getContext('2d');
			window.globalProfiles = new Chart(ctxGlobalProfiles, {
				type: 'horizontalBar',
				data: globalProfiles,
				options: {
        elements: {
						rectangle: {
							borderWidth: 2,
						}
					},
					layout: {
						padding: {
							left: 0,
							right: 0,
							top: 0,
							bottom: 0
							}
						},
					responsive: true,
					legend: {
						position: 'top',
					},
					tooltips: {
						enabled: true,
						backgroundColor: 'rgba(100,190,194,.95)',
						bodyFontColor: 'rgba(26,78,125,.99)',
						titleFontColor: 'rgba(26,78,125,.99)',
						borderColor: 'rgba(26,78,125,.99)',
						borderWidth: 1,
						callbacks: {
						label: function(tooltipItem, data) {
							var label = data.datasets[tooltipItem.datasetIndex].label || '';

							if (label) {
							label += ': ';
							}
							label += tooltipItem.xLabel + 5.5;
							return label;
							}
							}
						},
					scales: {
						yAxes: [{
							display: true,
							offsetGridlines: true
							}],
						xAxes: [{
							ticks: {
								min: -4.5,
								max: 4.5,
								callback: function(value, index, values) {
								return value+5.5;
								},
								display: true
							}
						}]
					},
					title: {
						display: true,
						text: ''
						}
        }
			});
			
// add toggles
		
jQuery('#toggle-profiles').click(function() {
	 globalProfiles.data.datasets.forEach(function(ds) {
    ds.hidden = !ds.hidden;
  });
  globalProfiles.update();
});

＆＃13;

＆＃13;

＆＃13;

我想要做的是拥有前16个数据集＆＃34;分组＆＃34;一起并以某种方式在视觉上与图例中的其余数据集分开。

有办法做到这一点吗？

Answer 1

更新：我想出了如何使用legendCallback功能来创建自定义图例...但是，我还没有弄清楚如何使图例项“可点击”以选择/取消选择数据集。 （我将发布一个新问题）

以下是我至少对自定义图例的看法：

var allData = [5.36, 4.75, 5.64, 5.82, 5.43, 5.34, 7.05, 6.50, 5.91, 5.52, 4.66, 5.30, 4.75, 4.41, 4.66, 5.70, 5.34, 6.52, 5.48, 5.43, 5.55, 6.18, 6.14, 5.45];
var femaleData = [5.33, 5.17, 5.44, 5.44, 5.61, 5.61, 6.67, 6.22, 5.83, 5.61, 4.56, 4.67, 5.61, 4.28, 4.11, 5.83, 5.61, 6.33, 5.50, 5.56, 6.22, 5.94, 5.72, 4.83];
var maleData = [5.38, 4.46, 5.77, 6.08, 5.31, 5.15, 7.31, 6.69, 5.96, 5.46, 4.73, 5.73, 4.15, 4.50, 5.04, 5.62, 5.15, 6.65, 5.46, 5.35, 5.08, 6.35, 6.42, 5.88];
// function1Data is G&A
var function1Data = [5.18, 5.18, 6.09, 5.09, 5.36, 5.09, 6.45, 6.55, 5.36, 5.64, 4.55, 5.09, 4.82, 4.55, 4.91, 6.00, 5.91, 5.64, 5.45, 5.27, 6.27, 5.73, 5.64, 4.82];
// function2Data is Sales & Service
var function2Data = [5.63, 4.50, 5.56, 5.88, 5.63, 6.13, 7.19, 6.75, 5.75, 5.69, 4.88, 5.44, 4.75, 4.44, 4.31, 5.94, 5.06, 6.63, 5.44, 5.75, 5.25, 6.50, 6.50, 5.63];
// function3Data is tech
var function3Data = [5.24, 4.71, 5.41, 6.24, 5.29, 4.76, 7.29, 6.24, 6.41, 5.29, 4.53, 5.29, 4.71, 4.29, 4.82, 5.29, 5.24, 7.00, 5.53, 5.24, 5.35, 6.18, 6.12, 5.71];
// function4Data is dev
var program1Data = [5.08, 4.54, 5.58, 5.58, 5.42, 5.29, 7.13, 6.58, 5.63, 5.54, 4.58, 4.79, 4.88, 4.54, 4.46, 6.04, 5.04, 6.67, 5.75, 5.33, 5.33, 6.46, 5.96, 5.00];
var program2Data = [5.21, 4.58, 5.89, 5.58, 5.42, 5.32, 6.89, 6.53, 5.68, 5.42, 4.58, 5.37, 4.47, 4.32, 4.79, 5.84, 5.32, 6.26, 5.68, 5.47, 5.32, 6.21, 6.16, 5.37];
// service1Data is 0-50
var service1Data = [5.50, 4.58, 5.67, 5.50, 5.50, 5.25, 7.00, 6.75, 5.67, 5.58, 4.92, 5.50, 4.67, 4.33, 5.25, 5.42, 5.33, 6.33, 4.92, 5.50, 5.42, 6.17, 6.17, 5.67];
// service2Data is 51-80
var service2Data = [4.90, 5.20, 5.90, 5.60, 5.40, 5.00, 7.20, 6.10, 5.60, 5.00, 4.30, 5.00, 4.90, 4.50, 4.00, 5.60, 5.90, 6.20, 5.90, 5.10, 5.70, 5.80, 5.80, 4.50];
// service3Data is 81-100		
var service3Data = [6.25, 4.42, 5.67, 6.08, 5.00, 5.83, 7.08, 6.42, 6.08, 6.33, 4.50, 5.67, 4.75, 4.25, 4.17, 5.17, 4.83, 6.67, 5.08, 4.92, 5.17, 6.50, 6.58, 5.42];
// service4Data is 101-154
var service4Data = [4.60, 4.90, 5.30, 6.10, 5.90, 5.20, 6.90, 6.70, 6.30, 5.00, 4.90, 4.90, 4.70, 4.60, 5.20, 6.80, 5.40, 6.90, 6.20, 6.30, 6.00, 6.20, 5.90, 6.20];
// role1Data is 0-4
var role1Data = [5.33, 4.67, 5.75, 6.50, 5.17, 4.75, 7.42, 6.75, 6.33, 5.42, 4.50, 6.08, 4.17, 4.50, 4.83, 5.42, 5.08, 6.83, 5.83, 5.17, 5.50, 6.50, 6.58, 6.08];
// role2Data is 5-18
var role2Data = [5.27, 5.09, 5.45, 5.64, 5.64, 6.18, 7.18, 6.27, 5.64, 4.91, 4.82, 5.09, 4.73, 4.36, 4.73, 5.82, 5.91, 6.64, 5.36, 5.45, 5.73, 5.73, 5.73, 5.27];
// role3Data is 19-32		
var role3Data = [4.78, 4.67, 6.56, 5.22, 6.44, 4.78, 7.00, 6.78, 5.78, 5.56, 5.22, 4.89, 4.56, 4.11, 4.22, 5.89, 5.22, 5.44, 6.44, 6.78, 6.00, 6.33, 6.22, 5.33];
// role4Data is 33-60
var role4Data = [5.50, 5.00, 5.67, 5.58, 5.25, 5.00, 6.50, 5.83, 5.75, 5.83, 4.58, 5.00, 5.08, 4.75, 4.67, 5.58, 5.58, 6.25, 5.25, 5.25, 5.33, 5.83, 5.75, 5.08];

// data from research for global norms/profiles

// sds realistic high	
var norm1Data = [5.7, 5.4, 5.7, 6.0, 4.5, 5.2, 5.5, 5.2, 5.9, 6.2, 4.4, 5.7, 4.5, 6.1, 5.9, 5.6, 5.3, 5.9, 5.2, 4.8, 5.3];

// sds realistic low	
var norm2Data = [6.1, 6.2, 4.4, 5.2, 4.7, 6.4, 5.4, 5.2, 5.1, 6.0, 4.5, 5.1, 7.2, 5.9, 6.0, 5.1, 6.7, 5.5, 5.2, 5.1, 5.9];

// sds investigative high
var norm3Data = [5.2, 5.8, 5.4, 5.5, 4.4, 4.8, 6.5, 5.1, 5.4, 5.6, 4.5, 5.3, 5.1, 5.8, 6.5, 5.7, 5.8, 5.8, 5.8, 4.6, 5.2];

// sds investigative low
var norm4Data = [6.5, 6.0, 4.8, 5.4, 4.6, 6.7, 4.7, 5.6, 5.4, 6.7, 4.5, 5.7, 6.7, 5.8, 5.7, 5.1, 6.1, 5.2, 5.0, 5.0, 5.9];

// sds social high
var norm5Data = [6.9, 5.6, 4.4, 6.3, 4.4, 6.9, 5.4, 5.3, 5.8, 6.8, 4.5, 6.6, 5.9, 5.9, 6.2, 4.8, 5.9, 6.4, 4.9, 5.0, 5.0];

// sds social low
var norm6Data = [4.1, 6.4, 6.0, 4.6, 4.8, 3.6, 5.9, 5.0, 4.7, 5.4, 4.5, 4.0, 5.4, 6.3, 5.8, 6.6, 6.1, 5.1, 6.3, 5.0, 6.0];

// sds enterprising high
var norm7Data = [6.7, 5.6, 4.8, 6.9, 4.4, 6.6, 5.2, 5.7, 6.8, 6.9, 4.4, 6.6, 5.3, 6.2, 6.2, 5.1, 5.3, 6.3, 5.0, 5.1, 5.6];

// sds enterprising low
var norm8Data = [4.6, 6.6, 4.8, 4.5, 4.2, 4.4, 5.5, 4.6, 4.2, 5.4, 4.1, 4.1, 6.7, 6.1, 6.4, 5.9, 6.7, 5.7, 6.1, 4.3, 5.7];

// sds conventional high
var norm9Data = [5.8, 5.7, 5.8, 5.5, 5.4, 5.8, 5.4, 5.7, 5.6, 6.1, 5.0, 5.4, 5.4, 5.8, 5.0, 5.5, 6.0, 5.3, 5.4, 5.8, 5.5];

// sds conventional low
var norm10Data = [6.1, 5.8, 4.4, 5.9, 3.9, 5.9, 5.2, 5.4, 5.7, 6.3, 3.9, 5.5, 6.3, 6.0, 6.6, 5.0, 5.8, 6.3, 5.3, 4.4, 5.6];

// corporate
var norm11Data = [6.1, 5.0, 5.5, 5.8, 5.9, 6.5, 7.4, 5.0, 6.0, 5.5, 5.9, 6.1, 5.2, 4.1, 4.7, 5.2, 5.1, 6.0, 5.1, 5.5, 5.1];

// engineers
var norm12Data = [5.3, 5.9, 5.4, 5.6, 5.0, 5.3, 7.8, 4.6, 5.5, 5.5, 4.9, 5.4, 4.8, 5.4, 6.0, 5.5, 5.5, 6.2, 5.9, 5.2, 5.6];

// scientists
var norm13Data = [4.5, 5.4, 4.8, 5.4, 4.6, 4.5, 8.3, 4.8, 5.0, 4.8, 4.3, 5.0, 5.4, 5.1, 6.5, 5.8, 5.0, 6.9, 6.7, 4.9, 5.3];

// emotional expressivity high
var norm14Data = [7.3, 5.8, 4.6, 6.2, 5.2, 7.1, 6.6, 5.6, 5.9, 6.9, 4.3, 6.4, 6.0, 5.4, 6.1, 4.5, 6.0, 6.0, 4.2, 5.0, 5.9];

// emotional expressivity low
var norm15Data = [5.1, 5.8, 5.7, 5.0, 5.5, 5.5, 6.5, 5.7, 4.9, 5.5, 5.3, 5.0, 5.3, 5.9, 5.5, 6.1, 6.0, 5.3, 5.8, 5.3, 5.5];

// emotional sensitivity high
var norm16Data = [6.4, 6.0, 4.5, 5.7, 5.2, 6.9, 6.5, 5.3, 5.6, 6.4, 4.9, 5.3, 5.8, 5.8, 6.2, 5.3, 6.4, 6.1, 5.0, 4.9, 5.6];

// emotional sensitivity low
var norm17Data = [5.2, 5.5, 6.1, 5.1, 5.3, 5.2, 6.3, 5.8, 5.2, 5.7, 5.3, 5.2, 5.1, 5.8, 5.3, 6.1, 5.6, 5.0, 5.6, 5.3, 5.6];

// emotional control high
var norm18Data = [5.4, 5.5, 4.0, 5.7, 5.9, 5.5, 6.6, 5.6, 5.5, 5.9, 4.7, 5.4, 5.7, 5.6, 6.2, 6.2, 5.5, 6.1, 5.6, 5.1, 5.5];

// emotional control low
var norm19Data = [6.1, 5.8, 5.4, 5.4, 5.2, 6.4, 6.4, 5.6, 5.4, 6.1, 5.2, 5.6, 5.6, 5.5, 5.4, 5.3, 6.2, 5.4, 5.2, 5.1, 5.6];

// social expressivity high
var norm20Data = [7.4, 5.4, 4.7, 6.0, 4.9, 7.0, 6.5, 5.6, 5.5, 7.3, 4.5, 6.7, 5.7, 5.2, 5.8, 4.6, 5.8, 6.2, 4.1, 4.9, 5.5];

// social expressivity low
var norm21Data = [4.8, 5.8, 5.9, 4.9, 5.8, 5.2, 6.6, 5.6, 4.9, 5.1, 5.2, 4.8, 5.3, 5.8, 5.5, 6.2, 5.9, 5.1, 6.0, 5.3, 5.6];

// social sensitivity high
var norm22Data = [6.0, 7.0, 5.5, 4.7, 4.9, 6.3, 6.3, 4.6, 4.8, 6.3, 5.0, 4.7, 5.6, 5.7, 5.8, 5.2, 7.1, 5.0, 5.0, 5.3, 6.4];

// social sensitivity low
var norm23Data = [5.8, 4.8, 5.5, 5.7, 5.7, 5.8, 6.6, 6.3, 5.7, 5.9, 5.3, 5.9, 5.4, 5.1, 5.2, 5.6, 5.3, 5.7, 5.4, 5.3, 5.1];

// social control high
var norm24Data = [6.7, 4.8, 4.5, 6.4, 5.9, 6.6, 6.8, 6.2, 6.1, 6.3, 4.9, 6.9, 6.1, 4.7, 5.5, 5.0, 5.3, 6.5, 4.7, 5.3, 5.2];

// social control low
var norm25Data = [5.3, 6.2, 5.9, 4.7, 5.4, 5.4, 6.3, 5.2, 4.7, 5.7, 5.4, 4.8, 5.3, 5.8, 5.6, 5.8, 6.3, 5.0, 5.6, 5.2, 5.8];

// empathy high
var norm26Data = [7.0, 5.1, 4.2, 5.9, 4.3, 6.9, 6.4, 6.1, 5.4, 7.1, 4.5, 6.3, 6.2, 5.0, 6.1, 5.1, 5.8, 6.6, 4.5, 4.7, 5.0];

// empathy low
var norm27Data = [4.6, 7.1, 5.8, 5.0, 4.9, 4.6, 6.0, 4.2, 5.2, 5.5, 4.6, 4.1, 5.2, 6.7, 6.3, 6.1, 6.5, 5.1, 6.1, 5.4, 6.3];

// high psych emotional
var norm28Data = [5.9, 3.7, 5.7, 5.9, 6.0, 5.8, 6.1, 7.2, 5.8, 5.3, 5.9, 6.2, 5.2, 5.2, 4.7, 5.3, 3.6, 5.8, 5.0, 5.7, 4.7];

// high psych social
var norm29Data = [7.1, 4.6, 4.9, 6.8, 5.3, 6.8, 6.2, 6.2, 6.4, 6.3, 5.4, 5.4, 5.6, 5.5, 5.5, 4.5, 4.2, 6.1, 4.6, 5.5, 5.2];

// high psych occupational
var norm30Data = [5.8, 4.5, 5.7, 5.3, 5.8, 6.0, 5.9, 6.5, 5.2, 5.3, 6.0, 5.6, 5.3, 5.2, 5.0, 5.5, 4.6, 5.5, 5.0, 5.4, 5.0];

// self-esteem high
var norm31Data = [6.6, 3.6, 5.3, 6.9, 6.0, 6.6, 4.7, 7.1, 7.1, 5.9, 6.0, 6.8, 5.3, 5.2, 5.1, 5.3, 3.8, 6.0, 4.5, 6.1, 4.2];

// self-esteem low
var norm32Data = [4.9, 6.8, 5.5, 4.9, 5.0, 5.1, 4.2, 4.2, 4.7, 5.3, 5.2, 4.6, 5.5, 6.8, 6.7, 6.0, 6.3, 5.0, 5.9, 5.4, 5.6];



var origin = 5.5;


var factorLabels = [
  ['Extraversion', 'Introverted • Extroverted'],
  ['Anxiety', 'Low-Anxiety • High-Anxiety'],
  ['Tough-Mindedness', 'Receptive • Tough-Minded'],
  ['Independence', 'Accommodating • Independent'],
  ['Self-Control', 'Unrestrained • Self-Controlled'],
  ['Warmth (A)', 'Reserved • Warm'],
  ['Reasoning (B)', 'Concrete • Absract'],
  ['Emotional Stability (C)', 'Reactive • Emotionally Stable'],
  ['Dominance (E)', 'Deferential • Dominant'],
  ['Liveliness (F)', 'Serious • Lively'],
  ['Rule-Consciousness (G)', 'Expedient • Rule-Conscious'],
  ['Social Boldness (H)', 'Shy • Socially Bold'],
  ['Sensitivity (I)', 'Utilitarian • Sensitive'],
  ['Vigilance (L)', 'Trusting • Vigilant'],
  ['Abstractedness (M)', 'Grounded • Abstracted'],
  ['Privateness', 'Forthright • Private'],
  ['Apprehension (O)', 'Self-Assured • Apprehensive'],
  ['Openness to Change (Q1)', 'Traditional • Open to Change'],
  ['Self-Reliant (Q2)', 'Group-Oriented • Self-Reliant'],
  ['Perfectionism (Q3)', 'Tolerates Disorder • Perfectionistic'],
  ['Tension (Q4)', 'Relaxed • Tense'],
  ['Adjustment', 'Emotionally Fragile', ' • Emotionally Resilient'],
  ['Leadership', 'Non-Leader • Leader'],
  ['Creativity', 'Status Quo • Innovative']
];

var factorLabelsResearch = [
  ['Extraversion', 'Introverted • Extroverted'],
  ['Anxiety', 'Low-Anxiety • High-Anxiety'],
  ['Tough-Mindedness', 'Receptive • Tough-Minded'],
  ['Independence', 'Accommodating • Independent'],
  ['Self-Control', 'Unrestrained • Self-Controlled'],
  ['Warmth (A)', 'Reserved • Warm'],
  ['Reasoning (B)', 'Concrete • Absract'],
  ['Emotional Stability (C)', 'Reactive • Emotionally Stable'],
  ['Dominance (E)', 'Deferential • Dominant'],
  ['Liveliness (F)', 'Serious • Lively'],
  ['Rule-Consciousness (G)', 'Expedient • Rule-Conscious'],
  ['Social Boldness (H)', 'Shy • Socially Bold'],
  ['Sensitivity (I)', 'Utilitarian • Sensitive'],
  ['Vigilance (L)', 'Trusting • Vigilant'],
  ['Abstractedness (M)', 'Grounded • Abstracted'],
  ['Privateness', 'Forthright • Private'],
  ['Apprehension (O)', 'Self-Assured • Apprehensive'],
  ['Openness to Change (Q1)', 'Traditional • Open to Change'],
  ['Self-Reliant (Q2)', 'Group-Oriented • Self-Reliant'],
  ['Perfectionism (Q3)', 'Tolerates Disorder • Perfectionistic'],
  ['Tension (Q4)', 'Relaxed • Tense']
];


var factorLabelsThemes = ['Investigative', 'Realistic', 'Enterprising', 'Artistic', 'Conventional', 'Social'];


var factorLabelsLeft = ['Introverted', 'Low Anxiety', 'Receptive', 'Accomodating', 'Unrestrained', 'Reserved', 'Concrete', 'Reactive', 'Deferential', 'Serious', 'Expedient', 'Shy', 'Utilitarian', 'Trusting', 'Grounded', 'Forthright', 'Self-Asured', 'Traditional', 'Group-Oriented', 'Tolerates Disorder', 'Relaxed', 'Emotionally Fragile', 'Non-Leader', 'Status Quo'];

var factorLabelsRight = ['Extroverted', 'High Anxiety', 'Tough-Minded', 'Independent', 'Self-Controlled', 'Warm', 'Abstract', 'Emotionally Stable', 'Dominant', 'Lively', 'Rule-Conscious', 'Socially Bold', 'Sensitive', 'Vigilant', 'Abstracted', 'Private', 'Apprehensive', 'Open to Change', 'Self-Reliant', 'Perfectionistic', 'Tense', 'Emotionally Resilient', 'Leader', 'Innovative'];

var globalProfiles = {
  labels: factorLabelsResearch,
  datasets: []
};
globalProfiles.datasets.push({
  data: role1Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(79,143,0,.75)',
  label: '0-4'
});
globalProfiles.datasets.push({
  data: role2Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(83, 134, 155,.75)',
  label: '5-18'
});
globalProfiles.datasets.push({
  data: role3Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(182, 87, 56,.75)',
  label: '19-32'
});
globalProfiles.datasets.push({
  data: role4Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: '33-60'
});
globalProfiles.datasets.push({
  data: service1Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(79,143,0,.75)',
  label: '0-50'
});
globalProfiles.datasets.push({
  data: service2Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(83, 134, 155,.75)',
  label: '51-80'
});
globalProfiles.datasets.push({
  data: service3Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(182, 87, 56,.75)',
  label: '81-100'
});
globalProfiles.datasets.push({
  data: service4Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: '101-154'
});
globalProfiles.datasets.push({
  data: program1Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'green',
  label: 'Program 1'
});
globalProfiles.datasets.push({
  data: program2Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'green',
  label: 'Program 2'
});
globalProfiles.datasets.push({
  data: function1Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(83, 134, 155,.75)',
  label: 'G&A'
});
globalProfiles.datasets.push({
  data: function2Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(182, 87, 56,.75)',
  label: 'Sales & Service'
});
globalProfiles.datasets.push({
  data: function3Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'Technology'
});
globalProfiles.datasets.push({
  data: femaleData.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.75)',
  label: 'Female'
});
globalProfiles.datasets.push({
  data: maleData.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.75)',
  label: 'Male'
});
globalProfiles.datasets.push({
  data: allData.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'All'
});

globalProfiles.datasets.push({
  data: norm1Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.99)',
  label: 'High Realistic'
});
globalProfiles.datasets.push({
  data: norm2Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.35)',
  label: 'Low Realistic'
});
globalProfiles.datasets.push({
  data: norm3Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.75)',
  label: 'High Investigative'
});
globalProfiles.datasets.push({
  data: norm4Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.15)',
  label: 'Low Investigative'
});
globalProfiles.datasets.push({
  data: norm5Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.99)',
  label: 'High Social'
});
globalProfiles.datasets.push({
  data: norm6Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.35)',
  label: 'Low Social'
});
globalProfiles.datasets.push({
  data: norm7Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.75)',
  label: 'High Enterprising'
});
globalProfiles.datasets.push({
  data: norm8Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.15)',
  label: 'Low Enterprising'
});
globalProfiles.datasets.push({
  data: norm9Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(255,192,0,.99)',
  label: 'High Conventional'
});
globalProfiles.datasets.push({
  data: norm10Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(255,192,0,.35)',
  label: 'Low Conventional'
});
globalProfiles.datasets.push({
  data: norm11Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.85)',
  label: 'Corporate'
});
globalProfiles.datasets.push({
  data: norm12Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.5)',
  label: 'Engineers'
});
globalProfiles.datasets.push({
  data: norm13Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.25)',
  label: 'Scientists'
});
globalProfiles.datasets.push({
  data: norm14Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.75)',
  label: 'High Emotional Expressivity'
});
globalProfiles.datasets.push({
  data: norm15Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.75)',
  label: 'Low Emotional Expressivity'
});
globalProfiles.datasets.push({
  data: norm16Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'High Emotional Sensitivity'
});
globalProfiles.datasets.push({
  data: norm17Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(79,143,0,.75)',
  label: 'Low Emotional Sensitivity'
});
globalProfiles.datasets.push({
  data: norm18Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(83, 134, 155,.75)',
  label: 'High Emotional Control'
});
globalProfiles.datasets.push({
  data: norm19Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(182, 87, 56,.75)',
  label: 'Low Emotional Control'
});
globalProfiles.datasets.push({
  data: norm20Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'High Social Expressivity'
});
globalProfiles.datasets.push({
  data: norm21Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(79,143,0,.75)',
  label: 'Low Social Expressivity'
});
globalProfiles.datasets.push({
  data: norm22Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(83, 134, 155,.75)',
  label: 'High Social Sensitivity'
});
globalProfiles.datasets.push({
  data: norm23Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(182, 87, 56,.75)',
  label: 'Low Social Sensitivity'
});
globalProfiles.datasets.push({
  data: norm24Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'High Social Control'
});
globalProfiles.datasets.push({
  data: norm25Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'green',
  label: 'Low Social Control'
});
globalProfiles.datasets.push({
  data: norm26Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'green',
  label: 'High Empathy'
});
globalProfiles.datasets.push({
  data: norm27Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(83, 134, 155,.75)',
  label: 'Low Empathy'
});
globalProfiles.datasets.push({
  data: norm28Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(182, 87, 56,.75)',
  label: 'High Psych Emotional'
});
globalProfiles.datasets.push({
  data: norm29Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'High Psych Social'
});
globalProfiles.datasets.push({
  data: norm30Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(100,190,194,.75)',
  label: 'High Psych Occupational'
});
globalProfiles.datasets.push({
  data: norm31Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(26,78,125,.75)',
  label: 'High Self-Esteem'
});
globalProfiles.datasets.push({
  data: norm32Data.map(function(value) {
    return value - origin;
  }),
  backgroundColor: 'rgba(103, 182, 93,.75)',
  label: 'Low Self-Esteem'
});

var ctxGlobalProfiles = document.getElementById('global-profiles').getContext('2d');
var myLegendContainer = document.getElementById("chart-legend");
var myGlobalProfiles = new Chart(ctxGlobalProfiles, {
  type: 'horizontalBar',
  data: globalProfiles,
  options: {
    elements: {
      rectangle: {
        borderWidth: 2,
      }
    },
    layout: {
      padding: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      }
    },
    responsive: true,
    legend: {
      display: false,
    },
    legendCallback: function(chart) {
      var legendHtml = [];
      legendHtml.push('<ul>');
      legendHtml.push('<h5>Company Data</h5>');
      for (var i = 0; i < 16; i++) {
        legendHtml.push('<li>');
        legendHtml.push('<span class="chart-color" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span><span>' + chart.data.datasets[i].label + '</span>');
        legendHtml.push('</li>')
      }
      legendHtml.push('<hr />');
      legendHtml.push('<h5>Research Data</h5>');
      for (var i = 16; i < chart.data.datasets.length; i++) {
        legendHtml.push('<li>');
        legendHtml.push('<span class="chart-color" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span><span>' + chart.data.datasets[i].label + '</span>');
        legendHtml.push('</li>')
      }
      legendHtml.push('</ul>');
      return legendHtml.join("");
    },
    tooltips: {
      enabled: true,
      backgroundColor: 'rgba(100,190,194,.95)',
      bodyFontColor: 'rgba(26,78,125,.99)',
      titleFontColor: 'rgba(26,78,125,.99)',
      borderColor: 'rgba(26,78,125,.99)',
      borderWidth: 1,
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += tooltipItem.xLabel + 5.5;
          return label;
        }
      }
    },
    scales: {
      yAxes: [{
        display: true,
        offsetGridlines: true
      }],
      xAxes: [{
        ticks: {
          min: -4.5,
          max: 4.5,
          callback: function(value, index, values) {
            return value + 5.5;
          },
          display: true
        }
      }]
    },
    title: {
      display: true,
      text: ''
    }
  }
});

myLegendContainer.innerHTML = myGlobalProfiles.generateLegend();

jQuery('#toggle-profiles').click(function() {
  myGlobalProfiles.data.datasets.forEach(function(ds) {
    ds.hidden = !ds.hidden;
  });
  myGlobalProfiles.update();
});

h4 {
  text-align: center;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
  padding: 0 10px;
}

li.hidden {
  text-decoration: line-through;
}

li span.chart-color {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Profiles from Research Data <br />and Company Data</h3>
<div class='uk-panel-box uk-panel-box-secondary uk-margin'>
  <h4>The 5 Global & 16 Primary Factors</h4>
  <button id='toggle-profiles'>show/hide all</button>
  <div id="chart-legend"></div>
  <canvas id='global-profiles' height='800'></canvas>
</div>