feat: [china-tech] 유니트리 왕싱싱 5번째 탭 추가
- 공급망 혁신 인터랙티브 비교 (기존 vs 유니트리 수직 계열화) - H1/G1 휴머노이드 제어 알고리즘 탭 전환 UI - 시장 점유율 도넛 차트, 가격 파괴 현황 Bar 차트 - ut- 접두사로 외부 함수 충돌 방지
This commit is contained in:
김보곤
@@ -45,6 +45,14 @@
|
||||
.tab-deepseek .expert-inactive { background-color: #e2e8f0; color: #64748b; opacity: 0.6; }
|
||||
.tab-deepseek .ds-content-section { display: none; }
|
||||
.tab-deepseek .ds-content-section.ds-active { display: block; }
|
||||
|
||||
/* 탭4: 유니트리 스타일 */
|
||||
.tab-unitree { background-color: #fafaf9; }
|
||||
.tab-unitree .ut-interactive-btn { transition: all 0.2s ease-in-out; }
|
||||
.tab-unitree .ut-interactive-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
|
||||
.tab-unitree .ut-active-tab { background-color: #f59e0b; color: white; border-color: #f59e0b; }
|
||||
.tab-unitree .ut-inactive-tab { background-color: transparent; color: #57534e; border-color: #d6d3d1; }
|
||||
.tab-unitree .ut-flow-arrow::after { content: '↓'; display: block; text-align: center; font-size: 1.5rem; color: #a8a29e; margin: 0.5rem 0; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@@ -59,7 +67,7 @@
|
||||
<button class="bigtech-tab" onclick="switchTab(1)">Agibot 휴머노이드 로봇 정보</button>
|
||||
<button class="bigtech-tab" onclick="switchTab(2)">양즈린 Kimi LLM 기술 리서치</button>
|
||||
<button class="bigtech-tab" onclick="switchTab(3)">DeepSeek, 량원펑</button>
|
||||
<button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
|
||||
<button class="bigtech-tab" onclick="switchTab(4)">유니트리 2/4족로봇 왕싱싱</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -760,6 +768,227 @@
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{{-- ========== 탭 4: 유니트리 로보틱스 분석 ========== --}}
|
||||
<div id="tab-content-4" class="tab-content tab-unitree">
|
||||
|
||||
{{-- Hero Section --}}
|
||||
<header class="pt-8 pb-8 sm:pt-12 sm:pb-12 bg-gradient-to-b from-amber-50 to-stone-50">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-4xl sm:text-5xl font-extrabold text-stone-900 tracking-tight mb-6">
|
||||
유니트리 로보틱스:<br>보행 로봇 대중화의 비밀
|
||||
</h1>
|
||||
<p class="text-lg sm:text-xl text-stone-500 mb-8 max-w-2xl mx-auto">
|
||||
창업자 왕싱싱(Wang Xingxing)은 어떻게 4족 보행 로봇의 가격을 수백만 원대로 낮추고, 휴머노이드 로봇 시장의 판도를 뒤흔들고 있을까요? 핵심 공급망 전략부터 최신 H1/G1 알고리즘까지 심층 분석합니다.
|
||||
</p>
|
||||
<div class="flex justify-center gap-4 text-sm text-stone-500">
|
||||
<span class="px-3 py-1 bg-white rounded-full border border-stone-200 shadow-sm">설립: 2016년</span>
|
||||
<span class="px-3 py-1 bg-white rounded-full border border-stone-200 shadow-sm">핵심: 가격 파괴 & 내재화</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-24">
|
||||
|
||||
{{-- 섹션1: 공급망 혁신 --}}
|
||||
<section id="ut-supply-chain">
|
||||
<div class="mb-10 text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-stone-900 mb-4">비용 절감의 핵심: '극단적 수직 계열화'</h2>
|
||||
<p class="text-stone-500">
|
||||
왕싱싱이 4족 보행 로봇(Go 시리즈 등)의 양산 가격을 타사 대비 1/10 수준으로 낮출 수 있었던 핵심은 <strong>공급망의 완전한 통제</strong>에 있습니다. 고가의 기성 부품을 조립하는 대신, 모터부터 제어기까지 자체 개발하여 중국 심천/항저우의 제조 인프라를 활용했습니다.
|
||||
</p>
|
||||
<p class="text-sm text-amber-500 mt-2 font-medium">아래 박스를 클릭하여 차이점을 확인하세요.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-stone-200 p-6 sm:p-10">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
|
||||
{{-- 기존 방식 --}}
|
||||
<div class="bg-stone-50 rounded-xl p-6 border border-stone-100">
|
||||
<h3 class="text-xl font-bold text-center text-stone-700 mb-6">기존 로봇 기업의 방식</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm text-center border border-stone-200">
|
||||
<span class="block font-semibold text-stone-800">해외 고성능 모터 구매</span>
|
||||
<span class="text-xs text-stone-500">(ex: Maxon 등 고가 부품)</span>
|
||||
</div>
|
||||
<div class="ut-flow-arrow"></div>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm text-center border border-stone-200">
|
||||
<span class="block font-semibold text-stone-800">외부 감속기 및 센서 통합</span>
|
||||
<span class="text-xs text-stone-500">(시스템 통합 비용 증가)</span>
|
||||
</div>
|
||||
<div class="ut-flow-arrow"></div>
|
||||
<div class="bg-red-50 p-4 rounded-lg shadow-sm text-center border border-red-100">
|
||||
<span class="block font-bold text-red-700">최종 단가 상승 (수천만 원대)</span>
|
||||
<span class="text-xs text-red-500">연구용/특수 목적에 국한</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 유니트리 전략 --}}
|
||||
<div class="bg-amber-50 rounded-xl p-6 border border-amber-200/50">
|
||||
<h3 class="text-xl font-bold text-center text-amber-700 mb-6">유니트리(Wang Xingxing) 전략</h3>
|
||||
<div class="space-y-4 flex flex-col h-full justify-between">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button onclick="utShowDetail('motor')" class="ut-interactive-btn bg-white p-3 rounded-lg shadow-sm text-center border border-amber-300/50 hover:bg-amber-500 hover:text-white transition-colors cursor-pointer">
|
||||
<span class="block font-bold">자체 모터 개발</span>
|
||||
<span class="text-xs opacity-80">클릭하여 보기</span>
|
||||
</button>
|
||||
<button onclick="utShowDetail('controller')" class="ut-interactive-btn bg-white p-3 rounded-lg shadow-sm text-center border border-amber-300/50 hover:bg-amber-500 hover:text-white transition-colors cursor-pointer">
|
||||
<span class="block font-bold">제어기 내재화</span>
|
||||
<span class="text-xs opacity-80">클릭하여 보기</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="ut-supply-detail-box" class="bg-white p-4 rounded-lg shadow-inner border border-stone-200 mt-4 min-h-[100px] flex items-center justify-center text-sm text-stone-600 text-center transition-all">
|
||||
상단의 자체 개발 요소를 클릭하면 상세 전략이 표시됩니다.
|
||||
</div>
|
||||
<div class="bg-green-50 p-4 rounded-lg shadow-sm text-center border border-green-200 mt-4">
|
||||
<span class="block font-bold text-green-700">최종 단가 혁신 (수백만 원대)</span>
|
||||
<span class="text-xs text-green-600">소비자/프로슈머 시장 개척</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- 섹션2: 제어 알고리즘 --}}
|
||||
<section id="ut-algorithms">
|
||||
<div class="mb-10 text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-stone-900 mb-4">휴머노이드 제어 알고리즘 진화</h2>
|
||||
<p class="text-stone-500">
|
||||
4족 보행에서 축적된 노하우는 휴머노이드 H1과 G1으로 이어졌습니다. 유니트리는 전통적인 모델 기반 제어(MPC)에서 벗어나, <strong>강화학습(RL)과 모방학습(Imitation Learning)</strong>을 적극 도입하여 보행 안정성과 복잡한 동작 구현 능력을 비약적으로 향상시켰습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-stone-200 overflow-hidden">
|
||||
<div class="flex border-b border-stone-200 bg-stone-50">
|
||||
<button onclick="utSwitchRobot('H1')" id="ut-tab-H1" class="flex-1 py-4 px-6 text-center font-bold text-lg border-b-2 ut-active-tab transition-colors cursor-pointer">
|
||||
범용 휴머노이드 'H1'
|
||||
</button>
|
||||
<button onclick="utSwitchRobot('G1')" id="ut-tab-G1" class="flex-1 py-4 px-6 text-center font-bold text-lg border-b-2 ut-inactive-tab transition-colors cursor-pointer">
|
||||
초유연 휴머노이드 'G1'
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 sm:p-10 min-h-[400px]">
|
||||
{{-- H1 Content --}}
|
||||
<div id="ut-content-H1" class="block animate-fade-in">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="md:col-span-2 space-y-6">
|
||||
<h3 class="text-2xl font-bold text-stone-800">강건성과 속도의 증명</h3>
|
||||
<p class="text-stone-600 leading-relaxed">
|
||||
H1은 유니트리의 첫 번째 풀사이즈 휴머노이드입니다. 핵심은 <strong>심층 강화학습(Deep Reinforcement Learning)</strong>을 통한 강력한 로코모션(Locomotion) 제어입니다. 시뮬레이션 환경에서 수만 번의 학습을 거쳐 실제 환경의 불확실성을 극복합니다.
|
||||
</p>
|
||||
<ul class="space-y-3 text-stone-700">
|
||||
<li class="flex items-start">
|
||||
<span class="text-amber-500 mr-2">✓</span>
|
||||
<span><strong>강화학습 기반 보행:</strong> 외부 충격(발차기 등)에도 균형을 즉각적으로 회복하는 강력한 알고리즘 탑재.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-amber-500 mr-2">✓</span>
|
||||
<span><strong>세계 최고 속도 기록:</strong> 풀사이즈 휴머노이드 중 최고 수준인 3.3m/s 이상의 주행 속도 달성.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-amber-500 mr-2">✓</span>
|
||||
<span><strong>고난이도 모션:</strong> 제자리 백플립(Backflip)을 성공하며 동적 제어 능력의 극한을 증명.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-stone-50 p-6 rounded-xl border border-stone-200 h-fit">
|
||||
<h4 class="font-bold text-stone-800 mb-4 border-b pb-2">H1 핵심 제원</h4>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between"><span class="text-stone-500">가격</span><span class="font-semibold text-amber-700">약 $90,000</span></div>
|
||||
<div class="flex justify-between"><span class="text-stone-500">무게</span><span class="font-semibold">약 47kg</span></div>
|
||||
<div class="flex justify-between"><span class="text-stone-500">최대 토크</span><span class="font-semibold">360 Nm (무릎)</span></div>
|
||||
<div class="flex justify-between"><span class="text-stone-500">제어 방식</span><span class="font-semibold">RL 중심</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- G1 Content --}}
|
||||
<div id="ut-content-G1" class="hidden animate-fade-in">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="md:col-span-2 space-y-6">
|
||||
<h3 class="text-2xl font-bold text-stone-800">모방학습과 초유연성의 결합</h3>
|
||||
<p class="text-stone-600 leading-relaxed">
|
||||
G1은 가격을 혁신적으로 낮추고 관절의 자유도를 극대화한 최신 모델입니다. H1의 RL 기반 위에 <strong>UnifySim을 활용한 강화학습과 모방학습(Imitation Learning)</strong>을 결합하여, 인간의 미세한 동작을 학습하고 모사하는 능력을 갖췄습니다.
|
||||
</p>
|
||||
<ul class="space-y-3 text-stone-700">
|
||||
<li class="flex items-start">
|
||||
<span class="text-amber-500 mr-2">✓</span>
|
||||
<span><strong>초유연 관절 제어:</strong> 누운 상태에서 기립하거나, 요가 자세와 같은 복잡하고 유연한 모션 제어 알고리즘 적용.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-amber-500 mr-2">✓</span>
|
||||
<span><strong>정밀 조작(Manipulation):</strong> 다관절 로봇 손(Dexterous Hand)을 통한 호두 까기, 프라이팬 다루기 등 정밀 제어 수행.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-amber-500 mr-2">✓</span>
|
||||
<span><strong>AI 통합 가속화:</strong> 대형언어모델(LLM) 기반의 AI 시스템을 통합하여 자연어 명령 수행 및 자율적 동작 생성 알고리즘 탑재 예정.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-stone-50 p-6 rounded-xl border border-stone-200 h-fit">
|
||||
<h4 class="font-bold text-stone-800 mb-4 border-b pb-2">G1 핵심 제원</h4>
|
||||
<div class="space-y-3 text-sm">
|
||||
<div class="flex justify-between"><span class="text-stone-500">가격</span><span class="font-semibold text-amber-700">약 $16,000</span></div>
|
||||
<div class="flex justify-between"><span class="text-stone-500">무게</span><span class="font-semibold">약 35kg</span></div>
|
||||
<div class="flex justify-between"><span class="text-stone-500">자유도(DoF)</span><span class="font-semibold">최대 43 (손 포함)</span></div>
|
||||
<div class="flex justify-between"><span class="text-stone-500">제어 방식</span><span class="font-semibold">RL + Imitation Learning</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- 섹션3: 시장 점유율 --}}
|
||||
<section id="ut-market">
|
||||
<div class="mb-10 text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-stone-900 mb-4">글로벌 시장 점유율 및 파급력</h2>
|
||||
<p class="text-stone-500">
|
||||
유니트리는 압도적인 가격 경쟁력을 바탕으로 <strong>소비자 및 교육/연구용 4족 보행 로봇 시장에서 독점적인 지위</strong>를 차지하고 있습니다. 휴머노이드 시장에서도 G1 출시를 통해 대중화의 포문을 열었습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm border border-stone-200">
|
||||
<h3 class="text-lg font-bold text-center text-stone-800 mb-2">보급형 4족 보행 로봇 시장 점유율 (추정)</h3>
|
||||
<p class="text-xs text-center text-stone-500 mb-6">수량(Volume) 기준 글로벌 시장, 교육/소비자용 타겟</p>
|
||||
<div class="chart-container">
|
||||
<canvas id="utMarketShareChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-4 text-sm text-stone-600 text-center">
|
||||
단일 모델로 연간 수천 대 이상을 출하하며 B2C 시장을 장악했습니다. 고가의 산업용 시장(Boston Dynamics 주도)과는 다른 세그먼트를 개척했습니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm border border-stone-200">
|
||||
<h3 class="text-lg font-bold text-center text-stone-800 mb-2">휴머노이드 로봇 가격 파괴 현황</h3>
|
||||
<p class="text-xs text-center text-stone-500 mb-6">주요 모델별 예상 출시가 비교 (단위: 천 달러)</p>
|
||||
<div class="chart-container">
|
||||
<canvas id="utPriceChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-4 text-sm text-stone-600 text-center">
|
||||
G1의 $16,000 가격 책정은 자동차 한 대 가격으로 휴머노이드를 소유할 수 있는 시대를 열었음을 시사합니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="bg-stone-900 text-stone-400 py-12 mt-20 border-t border-stone-800">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-xl font-bold text-white mb-4">결론: 하드웨어와 AI의 민주화</h2>
|
||||
<p class="max-w-2xl mx-auto text-sm leading-relaxed mb-8">
|
||||
왕싱싱의 유니트리 로보틱스는 단순한 로봇 제조사를 넘어, 로봇 부품의 수직 계열화를 통한 <strong>'하드웨어 비용의 극소화'</strong>와 강화학습을 통한 <strong>'소프트웨어(제어)의 지능화'</strong>를 동시에 달성하고 있습니다. 이는 다가올 1인 1로봇 시대의 가장 강력한 촉매제가 될 것입니다.
|
||||
</p>
|
||||
<p class="text-xs opacity-60">Interactive Report generated based on Unitree Robotics public data and industry analysis.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -767,7 +996,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
// 탭별 차트 초기화 상태 추적
|
||||
const chartInitialized = { 0: false, 1: false, 2: false, 3: false };
|
||||
const chartInitialized = { 0: false, 1: false, 2: false, 3: false, 4: false };
|
||||
|
||||
function switchTab(index) {
|
||||
// 탭 버튼 활성화
|
||||
@@ -784,6 +1013,7 @@ function switchTab(index) {
|
||||
if (index === 1) initAgibotCharts();
|
||||
if (index === 2) initKimiCharts();
|
||||
if (index === 3) initDeepSeekCharts();
|
||||
if (index === 4) initUnitreeCharts();
|
||||
chartInitialized[index] = true;
|
||||
}
|
||||
// 스크롤 맨 위로
|
||||
@@ -1121,6 +1351,127 @@ function initDeepSeekCostChart() {
|
||||
});
|
||||
}
|
||||
|
||||
// ===== 유니트리 탭 초기화 =====
|
||||
function initUnitreeCharts() {
|
||||
// 공급망 상세 표시
|
||||
var utSupplyDetails = {
|
||||
'motor': '<strong>고토크 관절 모터 자체 설계:</strong> 외주 제작 시 발생하는 마진을 없애고, 다리 관절에 최적화된 모터(M10 등)를 직접 설계하여 대량 생산 체제를 구축했습니다. 이는 원가 절감의 핵심입니다.',
|
||||
'controller': '<strong>통합 제어 보드 개발:</strong> 연산, 통신, 전력 관리를 하나의 보드에 통합하여 부품 수를 줄이고 조립 공정을 단순화했습니다. 이는 불량률을 낮추고 단가를 혁신적으로 떨어뜨립니다.'
|
||||
};
|
||||
|
||||
window.utShowDetail = function(type) {
|
||||
var box = document.getElementById('ut-supply-detail-box');
|
||||
box.style.opacity = 0;
|
||||
setTimeout(function() {
|
||||
box.innerHTML = utSupplyDetails[type];
|
||||
box.style.opacity = 1;
|
||||
box.style.backgroundColor = '#fef3c7';
|
||||
box.style.borderColor = '#f59e0b';
|
||||
setTimeout(function() {
|
||||
box.style.backgroundColor = '';
|
||||
box.style.borderColor = '';
|
||||
}, 500);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// H1/G1 로봇 탭 전환
|
||||
window.utSwitchRobot = function(type) {
|
||||
var tabs = ['H1', 'G1'];
|
||||
tabs.forEach(function(tab) {
|
||||
var btn = document.getElementById('ut-tab-' + tab);
|
||||
var content = document.getElementById('ut-content-' + tab);
|
||||
if (tab === type) {
|
||||
btn.classList.remove('ut-inactive-tab');
|
||||
btn.classList.add('ut-active-tab');
|
||||
content.classList.remove('hidden');
|
||||
content.classList.add('block');
|
||||
} else {
|
||||
btn.classList.remove('ut-active-tab');
|
||||
btn.classList.add('ut-inactive-tab');
|
||||
content.classList.remove('block');
|
||||
content.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 시장 점유율 도넛 차트
|
||||
var ctxShare = document.getElementById('utMarketShareChart');
|
||||
if (ctxShare) {
|
||||
new Chart(ctxShare.getContext('2d'), {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Unitree (중저가 시장 주도)', '기타 기업', 'Boston Dynamics (고가 특수 목적)'],
|
||||
datasets: [{
|
||||
data: [65, 25, 10],
|
||||
backgroundColor: ['#f59e0b', '#d6d3d1', '#44403c'],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: { padding: 20, usePointStyle: true }
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.label + ': 약 ' + context.parsed + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
cutout: '70%'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 가격 파괴 현황 바 차트
|
||||
var ctxPrice = document.getElementById('utPriceChart');
|
||||
if (ctxPrice) {
|
||||
new Chart(ctxPrice.getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Unitree G1', 'Unitree H1', '타사 휴머노이드 A', '타사 휴머노이드 B'],
|
||||
datasets: [{
|
||||
label: '출시(예상)가 ($k)',
|
||||
data: [16, 90, 150, 200],
|
||||
backgroundColor: ['#f59e0b', '#fbbf24', '#d6d3d1', '#a8a29e'],
|
||||
borderRadius: 6,
|
||||
barThickness: 'flex',
|
||||
maxBarThickness: 50
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: { color: '#e7e5e4' },
|
||||
title: { display: true, text: '가격 (천 달러)' }
|
||||
},
|
||||
y: { grid: { display: false } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return '$' + context.parsed.x + ',000';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 페이지 로드 시 탭 0 차트 초기화
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initCambriconCharts();
|
||||
|
||||
Reference in New Issue
Block a user