🌐 地區 × 世代 交叉指南
含向上管理（上司）與向下管理（下屬）雙視角
💼 管理情境建議
融合「文化 × 世代」雙層邏輯，建議會隨所選世代而調整
'+
''+
''+chips+'
';
}).join('');
document.getElementById('cg-radar-note').textContent='分數越高代表該傾向越強（0–100）。'+(state.mode==='gen'?'（文化維度為國家層級，同國多世代下僅顯示單一輪廓）':'');
const mg=document.getElementById('cg-mgmt');
mg.className='cg-grid '+gc; mg.style.marginBottom='0';
mg.innerHTML = combos.map(c=>{
const reg=regions[c.r],ge=gens[c.g];
const accent = state.mode==='gen'?genColors[c.g]:reg.color;
const items=data[c.r][c.g].mg.map(m=>'
💡'+m+'').join('');
return '
'+reg.flag+' 在'+reg.name+'帶'+ge.icon+ge.name+'
';
}).join('');
bindEvents();
drawRadar(combos);
}
function drawRadar(combos){
const uniq=[...new Set(combos.map(c=>c.r))];
const canvas=document.getElementById('cg-radar');
const ctx=canvas.getContext('2d');
const W=canvas.width,H=canvas.height;
ctx.clearRect(0,0,W,H);
const cx=W/2, cy=H/2+6, R=Math.min(W,H)/2-58;
const N=hofKeys.length;
const ang=i=>(-Math.PI/2)+(i*2*Math.PI/N);
// grid rings
ctx.strokeStyle='#e2e8f0'; ctx.fillStyle='#94a3b8'; ctx.lineWidth=1;
for(let ring=1;ring<=4;ring++){
const rr=R*ring/4;
ctx.beginPath();
for(let i=0;i<=N;i++){const a=ang(i%N);const x=cx+rr*Math.cos(a),y=cy+rr*Math.sin(a);i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);}
ctx.stroke();
}
// spokes + labels
ctx.font='12px sans-serif';
for(let i=0;i
0?'left':'right');
ctx.textBaseline = Math.abs(Math.sin(a))<0.3?'middle':(Math.sin(a)>0?'top':'bottom');
ctx.fillText(hofLabels[hofKeys[i]],lx,ly);
}
// datasets
uniq.forEach(r=>{
const reg=regions[r];
ctx.beginPath();
hofKeys.forEach((k,i)=>{
const v=reg.hof[k]/100, a=ang(i);
const x=cx+R*v*Math.cos(a),y=cy+R*v*Math.sin(a);
i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
});
ctx.closePath();
ctx.fillStyle=hexA(reg.color,uniq.length>3?0.12:0.22);
ctx.fill();
ctx.strokeStyle=reg.color;ctx.lineWidth=2;ctx.stroke();
hofKeys.forEach((k,i)=>{
const v=reg.hof[k]/100, a=ang(i);
const x=cx+R*v*Math.cos(a),y=cy+R*v*Math.sin(a);
ctx.beginPath();ctx.arc(x,y,3,0,2*Math.PI);ctx.fillStyle=reg.color;ctx.fill();
});
});
document.getElementById('cg-legend').innerHTML = uniq.map(r=>
''+regions[r].name+''
).join('');
}
function bindEvents(){
document.querySelectorAll('.cg-mode').forEach(b=>b.onclick=()=>{state.mode=b.dataset.mode;render();});
document.querySelectorAll('.cg-pill[data-region]').forEach(b=>b.onclick=()=>{
const k=b.dataset.region;
if(state.mode==='country') state.selCountries=toggle(state.selCountries,k); else state.region=k;
render();
});
document.querySelectorAll('.cg-pill[data-gen]').forEach(b=>b.onclick=()=>{
const k=b.dataset.gen;
if(state.mode==='gen') state.selGens=toggle(state.selGens,k); else state.gen=k;
render();
});
}
render();
})();
相關
發表迴響