Question

我使用legendCallback功能创建了一个自定义html图例，但我不确定如何使图例项“可点击”以选择/取消选择相应的数据集。

我确信这一定是可能的，但我不知道该怎么做。

我确实在这里找到了一个可能的解决方案：https://github.com/chartjs/Chart.js/issues/5070

...但我无法弄清楚如何调整它（或知道是否可以采用这种方法）使其适用于我的自定义图例。

更新：由于这篇文章，我已经有了一段路程： https://github.com/chartjs/Chart.js/issues/2565 ...我已经更新了codepen和codesnippet，其中包含一些可以使图例项目可点击的更改...我仍然需要帮助的是将图例项目切换为“隐藏”/来自“隐藏”。

这就是我所拥有的：

在codepen

上

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'
});

updateDataset = function(e, datasetIndex) {
        var index = datasetIndex;
        var ci = e.view.myGlobalProfiles;
        var meta = ci.getDatasetMeta(index);

        // See controller.isDatasetVisible comment
        meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

        // We hid a dataset ... rerender the chart
        ci.update();
    };

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 onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">');
        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 onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ')">');
        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>
<div class='uk-panel uk-panel-box uk-panel-box-primary'>
  <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>

Answer 1

跳出您已经创建的内容，在每个 HTML 生成的图例项周围添加一个 click 事件，并使用该 click 事件隐藏 indiv。数据集，基于匹配条件。

我在 Angular 中配置了这个，但逻辑是相似的。

使用下面的 HTML，我生成了一个自定义图例，其中显示了我的每个标签。当一个标签被点击时，hideOneDataset fn 被调用，传递被点击的legendItem 的值。

  <div *ngIf="legendData">
    <ul class="my-legend">
      <li class="legend-item" *ngFor="let legendItem of legendData" (click)="hideOneDataset($event.target.innerText)">
        {{ legendItem.text }}
      </li>
    </ul>
  </div>

然后，我配置了 hideOneDataset 函数来循环遍历每个数据集项目，并确定我的自定义 HTML 图例中的 legendItem === 当前元素标签的那个。如果是，隐藏它。


  hideOneDataset(legendItem) {
    // GET each dataset in the chart
    this.chartComponent.chart.data.datasets.forEach(ele => {
      // IF the custom legend item clicked on equals the label of one of our datapoints, hide that data
      if (ele.label === legendItem) {
        ele.hidden = !ele.hidden;
      }
    });

    this.chartComponent.update();

  }

希望这对偶然发现此问题的人有所帮助。

chart.js自定义图例 - 使图例项可单击以选择/取消选择数据

1 个答案: