427 lines
13 KiB
HTML
427 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<title>style category</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
.viewport {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
overflow: auto;
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
cursor: grab;
|
|||
|
|
scrollbar-width: thick;
|
|||
|
|
scrollbar-color: #666 #eee;
|
|||
|
|
}
|
|||
|
|
.viewport::-webkit-scrollbar {
|
|||
|
|
height: 16px;
|
|||
|
|
width: 16px;
|
|||
|
|
}
|
|||
|
|
.viewport::-webkit-scrollbar-track {
|
|||
|
|
background: #eee;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.viewport::-webkit-scrollbar-thumb {
|
|||
|
|
background: #666;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 3px solid #eee;
|
|||
|
|
}
|
|||
|
|
.viewport::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: #333;
|
|||
|
|
}
|
|||
|
|
.content-size {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
padding: 30px;
|
|||
|
|
transform-origin: top left;
|
|||
|
|
width: max-content;
|
|||
|
|
min-width: 100%;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 100px;
|
|||
|
|
margin: 40px 0 60px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.chart-section {
|
|||
|
|
margin-bottom: 80px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 30px;
|
|||
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 80px;
|
|||
|
|
margin: 0 0 40px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #444;
|
|||
|
|
}
|
|||
|
|
.chart-container {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
width: 100%;
|
|||
|
|
min-width: 8000px; /* 适配20倍组间空隙，大幅扩大容器宽度 */
|
|||
|
|
min-height: 1900px;
|
|||
|
|
scrollbar-width: thick;
|
|||
|
|
scrollbar-color: #666 #eee;
|
|||
|
|
padding-bottom: 100px;
|
|||
|
|
}
|
|||
|
|
/* 自定义滚动条 */
|
|||
|
|
.chart-container::-webkit-scrollbar {
|
|||
|
|
height: 16px;
|
|||
|
|
}
|
|||
|
|
.chart-container::-webkit-scrollbar-track {
|
|||
|
|
background: #eee;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.chart-container::-webkit-scrollbar-thumb {
|
|||
|
|
background: #666;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 3px solid #eee;
|
|||
|
|
}
|
|||
|
|
.chart-container::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: #333;
|
|||
|
|
}
|
|||
|
|
canvas {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1800px !important;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 2px solid #ddd;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
/* 响应式调整：保持默认缩放30%，不额外调整 */
|
|||
|
|
@media (max-width: 1200px) {
|
|||
|
|
.chart-container {
|
|||
|
|
min-height: 1900px;
|
|||
|
|
}
|
|||
|
|
canvas {
|
|||
|
|
height: 1800px !important;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
font-size: 48px;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
font-size: 36px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!-- 禁止页面缩放的meta标签 -->
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="viewport" class="viewport">
|
|||
|
|
<div id="content-size" class="content-size">
|
|||
|
|
<div id="content" class="content">
|
|||
|
|
<h1>style category</h1>
|
|||
|
|
|
|||
|
|
<div class="chart-section">
|
|||
|
|
<h2>1. ALL </h2>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chartAll"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-section">
|
|||
|
|
<h2>2. Male </h2>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chartMale"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chart-section">
|
|||
|
|
<h2>3. Female </h2>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<canvas id="chartFemale"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
const viewport = document.getElementById('viewport');
|
|||
|
|
const content = document.getElementById('content');
|
|||
|
|
const contentSize = document.getElementById('content-size');
|
|||
|
|
let MIN_SCALE = 1;
|
|||
|
|
const MAX_SCALE = 3;
|
|||
|
|
let scale = 1;
|
|||
|
|
function computeMinScale() {
|
|||
|
|
const cw = content.offsetWidth;
|
|||
|
|
const vw = viewport.clientWidth;
|
|||
|
|
if (!cw || !vw) return 1;
|
|||
|
|
return Math.min(MAX_SCALE, Math.max(0.2, vw / cw));
|
|||
|
|
}
|
|||
|
|
function updateWrapperSize() {
|
|||
|
|
const w = content.offsetWidth * scale;
|
|||
|
|
const h = content.offsetHeight * scale;
|
|||
|
|
contentSize.style.width = w + 'px';
|
|||
|
|
contentSize.style.height = h + 'px';
|
|||
|
|
}
|
|||
|
|
function applyScale(newScale, ax, ay) {
|
|||
|
|
const prev = scale;
|
|||
|
|
const target = Math.max(MIN_SCALE, Math.min(MAX_SCALE, newScale));
|
|||
|
|
if (target === prev) return;
|
|||
|
|
const ratio = target / prev;
|
|||
|
|
const rect = viewport.getBoundingClientRect();
|
|||
|
|
const anchorX = ax != null ? ax : viewport.scrollLeft + viewport.clientWidth / 2;
|
|||
|
|
const anchorY = ay != null ? ay : viewport.scrollTop + viewport.clientHeight / 2;
|
|||
|
|
scale = target;
|
|||
|
|
content.style.transform = 'scale(' + scale + ')';
|
|||
|
|
updateWrapperSize();
|
|||
|
|
let newLeft = anchorX * ratio - viewport.clientWidth / 2;
|
|||
|
|
let newTop = anchorY * ratio - viewport.clientHeight / 2;
|
|||
|
|
const maxLeft = Math.max(0, contentSize.scrollWidth - viewport.clientWidth);
|
|||
|
|
const maxTop = Math.max(0, contentSize.scrollHeight - viewport.clientHeight);
|
|||
|
|
viewport.scrollLeft = Math.max(0, Math.min(maxLeft, newLeft));
|
|||
|
|
viewport.scrollTop = Math.max(0, Math.min(maxTop, newTop));
|
|||
|
|
}
|
|||
|
|
function initScale() {
|
|||
|
|
MIN_SCALE = computeMinScale();
|
|||
|
|
scale = MIN_SCALE;
|
|||
|
|
content.style.transform = 'scale(' + scale + ')';
|
|||
|
|
updateWrapperSize();
|
|||
|
|
}
|
|||
|
|
initScale();
|
|||
|
|
|
|||
|
|
let dragging = false;
|
|||
|
|
let sx = 0, sy = 0, sl = 0, st = 0;
|
|||
|
|
viewport.addEventListener('mousedown', function(e) {
|
|||
|
|
if (e.button !== 0) return;
|
|||
|
|
dragging = true;
|
|||
|
|
viewport.style.cursor = 'grabbing';
|
|||
|
|
sx = e.clientX;
|
|||
|
|
sy = e.clientY;
|
|||
|
|
sl = viewport.scrollLeft;
|
|||
|
|
st = viewport.scrollTop;
|
|||
|
|
});
|
|||
|
|
window.addEventListener('mousemove', function(e) {
|
|||
|
|
if (!dragging) return;
|
|||
|
|
viewport.scrollLeft = sl - (e.clientX - sx);
|
|||
|
|
viewport.scrollTop = st - (e.clientY - sy);
|
|||
|
|
});
|
|||
|
|
window.addEventListener('mouseup', function() {
|
|||
|
|
dragging = false;
|
|||
|
|
viewport.style.cursor = '';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
viewport.addEventListener('wheel', function(e) {
|
|||
|
|
if (e.ctrlKey || e.metaKey) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const factor = e.deltaY < 0 ? 1.1 : 0.9;
|
|||
|
|
const rect = viewport.getBoundingClientRect();
|
|||
|
|
const ax = viewport.scrollLeft + (e.clientX - rect.left);
|
|||
|
|
const ay = viewport.scrollTop + (e.clientY - rect.top);
|
|||
|
|
const next = scale * factor;
|
|||
|
|
applyScale(next < MIN_SCALE ? MIN_SCALE : next, ax, ay);
|
|||
|
|
}
|
|||
|
|
}, { passive: false });
|
|||
|
|
|
|||
|
|
window.addEventListener('resize', function() {
|
|||
|
|
const prevMin = MIN_SCALE;
|
|||
|
|
MIN_SCALE = computeMinScale();
|
|||
|
|
if (scale < MIN_SCALE) {
|
|||
|
|
applyScale(MIN_SCALE);
|
|||
|
|
} else {
|
|||
|
|
updateWrapperSize();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
window.addEventListener('load', function() {
|
|||
|
|
initScale();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 共用配置 - 保持原有标签处理逻辑（下划线换行）
|
|||
|
|
const labels = [
|
|||
|
|
'ACADEMIC','BUSINESS','CASUAL','COUNTRY_STYLE','DOPAMINE','ETHNIC','FUTURISM',
|
|||
|
|
'GOTHIC','LOLITA','MERLAD','MINIMALISM','NEW_CHINESE','OUTDOOR_FUNCTIONAL',
|
|||
|
|
'POST_APOCALYPTIC','PREPPY','ROCK','ROMANTIC','SEXY','SWEET','WABI_SABI','Y2K','民族风'
|
|||
|
|
].map(label => label.replace('_', '\n'));
|
|||
|
|
|
|||
|
|
// 所有数据（保持更新后的数值）
|
|||
|
|
const allData = {
|
|||
|
|
male_tops: [0,686,638,491,128,11,366,35,0,20,313,126,359,166,385,187,6,3,3,219,282,0],
|
|||
|
|
male_bottoms: [0,280,199,141,132,1,43,49,0,13,178,93,279,10,96,25,0,5,0,163,239,0],
|
|||
|
|
male_outwear: [0,2442,2147,1245,161,19,671,216,0,58,471,168,1001,319,803,367,11,1,1,278,631,0],
|
|||
|
|
female_dress: [260,1030,4322,1158,256,0,397,340,488,279,1104,312,215,170,0,223,990,607,1438,293,292,159],
|
|||
|
|
female_skirt: [408,662,1177,633,214,0,381,280,278,308,358,200,297,209,0,231,584,233,714,246,385,95],
|
|||
|
|
female_blouse: [618,1275,3786,710,385,0,533,412,454,453,616,221,852,181,0,437,869,533,899,336,991,169],
|
|||
|
|
female_outwear: [267,1255,740,453,178,0,418,160,101,301,273,172,712,172,0,245,198,13,159,280,500,76],
|
|||
|
|
female_trousers: [171,782,1899,391,232,0,267,64,137,293,351,141,865,101,0,189,654,137,319,299,427,96]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 颜色配置（保持原有颜色）
|
|||
|
|
const colors = {
|
|||
|
|
male_tops: '#1f77b4',
|
|||
|
|
male_bottoms: '#ff7f0e',
|
|||
|
|
male_outwear: '#2ca02c',
|
|||
|
|
female_dress: '#d62728',
|
|||
|
|
female_skirt: '#9467bd',
|
|||
|
|
female_blouse: '#8c564b',
|
|||
|
|
female_outwear: '#e377c2',
|
|||
|
|
female_trousers: '#7f7f7f'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 图表基础配置 - 核心修改：categoryPercentage设为0.04（原0.8的1/20），扩大组间空隙20倍
|
|||
|
|
const baseChartConfig = {
|
|||
|
|
responsive: true,
|
|||
|
|
maintainAspectRatio: false,
|
|||
|
|
plugins: {
|
|||
|
|
legend: {
|
|||
|
|
position: 'top',
|
|||
|
|
labels: {
|
|||
|
|
font: { size: 60, weight: 'bold' },
|
|||
|
|
padding: 60,
|
|||
|
|
boxWidth: 60
|
|||
|
|
},
|
|||
|
|
padding: { bottom: 60 }
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
mode: 'index',
|
|||
|
|
intersect: false,
|
|||
|
|
padding: 30,
|
|||
|
|
titleFont: { size: 60 },
|
|||
|
|
bodyFont: { size: 42 },
|
|||
|
|
boxPadding: 20,
|
|||
|
|
cornerRadius: 12
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
scales: {
|
|||
|
|
x: {
|
|||
|
|
stacked: false,
|
|||
|
|
title: {
|
|||
|
|
display: true,
|
|||
|
|
text: '',
|
|||
|
|
font: { size: 1, weight: 'bold' },
|
|||
|
|
padding: { top: 1, bottom: 1 }
|
|||
|
|
},
|
|||
|
|
ticks: {
|
|||
|
|
maxRotation: 0, // 保持原有斜放角度（向左下45度）
|
|||
|
|
minRotation: 0, // 强制固定角度
|
|||
|
|
autoSkip: false,
|
|||
|
|
font: { size: 28, weight: 'bold' },
|
|||
|
|
padding: 150,
|
|||
|
|
color: '#333',
|
|||
|
|
lineHeight: 1.3,
|
|||
|
|
align: 'right' // 斜放标签右对齐，提升可读性
|
|||
|
|
},
|
|||
|
|
grid: { display: false },
|
|||
|
|
border: { width: 3 },
|
|||
|
|
categoryPercentage: 0.5, // 核心修改：原0.8 → 0.04，组间空隙扩大20倍
|
|||
|
|
barPercentage: 0.8, // 保持组内柱子宽度不变
|
|||
|
|
},
|
|||
|
|
y: {
|
|||
|
|
beginAtZero: true,
|
|||
|
|
title: {
|
|||
|
|
display: true,
|
|||
|
|
text: '',
|
|||
|
|
font: { size: 1, weight: 'bold' },
|
|||
|
|
padding: { right: 1 }
|
|||
|
|
},
|
|||
|
|
ticks: {
|
|||
|
|
font: { size: 33, weight: 'bold' },
|
|||
|
|
padding: 30,
|
|||
|
|
color: '#333',
|
|||
|
|
stepSize: 500 // 适配更大数值范围
|
|||
|
|
},
|
|||
|
|
grid: { color: '#e0e0e0', lineWidth: 3 },
|
|||
|
|
border: { width: 3 }
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
layout: {
|
|||
|
|
padding: { top: 60, right: 90, bottom: 100, left: 90 }
|
|||
|
|
},
|
|||
|
|
animation: { duration: 1500, easing: 'easeOutQuart' },
|
|||
|
|
barThickness: 'flex',
|
|||
|
|
maxBarThickness: 70,
|
|||
|
|
minBarLength: 5
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 1. 创建综合图表
|
|||
|
|
new Chart(document.getElementById('chartAll'), {
|
|||
|
|
type: 'bar',
|
|||
|
|
data: {
|
|||
|
|
labels: labels,
|
|||
|
|
datasets: Object.keys(allData).map(key => ({
|
|||
|
|
label: key,
|
|||
|
|
data: allData[key],
|
|||
|
|
backgroundColor: colors[key]
|
|||
|
|
}))
|
|||
|
|
},
|
|||
|
|
options: { ...baseChartConfig }
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 2. 创建男性分类图表
|
|||
|
|
new Chart(document.getElementById('chartMale'), {
|
|||
|
|
type: 'bar',
|
|||
|
|
data: {
|
|||
|
|
labels: labels,
|
|||
|
|
datasets: [
|
|||
|
|
{ label: 'male_tops', data: allData.male_tops, backgroundColor: colors.male_tops },
|
|||
|
|
{ label: 'male_bottoms', data: allData.male_bottoms, backgroundColor: colors.male_bottoms },
|
|||
|
|
{ label: 'male_outwear', data: allData.male_outwear, backgroundColor: colors.male_outwear }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
options: {
|
|||
|
|
...baseChartConfig,
|
|||
|
|
scales: {
|
|||
|
|
...baseChartConfig.scales,
|
|||
|
|
x: {
|
|||
|
|
...baseChartConfig.scales.x,
|
|||
|
|
categoryPercentage: 0.35
|
|||
|
|
},
|
|||
|
|
y: {
|
|||
|
|
...baseChartConfig.scales.y,
|
|||
|
|
stepSize: 800 // 适配男性外套最大值2442
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 3. 创建女性分类图表
|
|||
|
|
new Chart(document.getElementById('chartFemale'), {
|
|||
|
|
type: 'bar',
|
|||
|
|
data: {
|
|||
|
|
labels: labels,
|
|||
|
|
datasets: [
|
|||
|
|
{ label: 'female_dress', data: allData.female_dress, backgroundColor: colors.female_dress },
|
|||
|
|
{ label: 'female_skirt', data: allData.female_skirt, backgroundColor: colors.female_skirt },
|
|||
|
|
{ label: 'female_blouse', data: allData.female_blouse, backgroundColor: colors.female_blouse },
|
|||
|
|
{ label: 'female_outwear', data: allData.female_outwear, backgroundColor: colors.female_outwear },
|
|||
|
|
{ label: 'female_trousers', data: allData.female_trousers, backgroundColor: colors.female_trousers }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
options: {
|
|||
|
|
...baseChartConfig,
|
|||
|
|
scales: {
|
|||
|
|
...baseChartConfig.scales,
|
|||
|
|
x: {
|
|||
|
|
...baseChartConfig.scales.x,
|
|||
|
|
categoryPercentage: 0.28
|
|||
|
|
},
|
|||
|
|
y: {
|
|||
|
|
...baseChartConfig.scales.y,
|
|||
|
|
stepSize: 1000 // 适配女性连衣裙最大值4322
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|