Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biểu đồ & Dữ liệu liên quan</title>
<!-- STREAMING_CHUNK:Loading libraries and fonts... -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc; /* Nền xám rất nhạt */
}
/* Tùy chỉnh scrollbar cho menu trái nếu có nhiều item */
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
</style>
</head>
<body class="p-4 md:p-8 flex justify-center items-center min-h-screen">
<!-- STREAMING_CHUNK:Main container setup... -->
<div class="w-full max-w-6xl">
<!-- Header Tổng -->
<div class="flex items-center gap-3 mb-6 px-2">
<div class="flex gap-1 items-end h-6">
<div class="w-1.5 h-4 bg-indigo-400 rounded-sm"></div>
<div class="w-1.5 h-6 bg-indigo-600 rounded-sm"></div>
<div class="w-1.5 h-3 bg-indigo-300 rounded-sm"></div>
</div>
<h1 class="text-2xl font-bold text-slate-800">Biểu đồ & Dữ liệu liên quan</h1>
</div>
<!-- Card Container -->
<div class="bg-white rounded-2xl shadow-[0_2px_12px_rgba(0,0,0,0.04)] border border-slate-100 flex flex-col md:flex-row overflow-hidden">
<!-- STREAMING_CHUNK:Left Sidebar Menu... -->
<!-- Cột trái: Danh sách chỉ số -->
<div class="w-full md:w-80 border-b md:border-b-0 md:border-r border-slate-100 bg-slate-50/50 flex flex-col">
<div class="p-3 custom-scrollbar overflow-y-auto h-full">
<!-- Item 1: Active -->
<div class="group relative p-4 mb-2 bg-white rounded-xl shadow-sm border border-indigo-100 cursor-pointer overflow-hidden transition-all">
<!-- Vạch màu bên trái cho trạng thái active -->
<div class="absolute left-0 top-0 bottom-0 w-1 bg-indigo-600"></div>
<div class="flex justify-between items-start pl-2">
<div>
<h3 class="font-semibold text-indigo-700 mb-1">Giá khí</h3>
<p class="text-sm text-slate-500">Chi phí > Giá khí đầu vào</p>
</div>
<div class="w-2.5 h-2.5 rounded-full bg-rose-500 mt-1.5 shadow-sm"></div>
</div>
</div>
<!-- Item 2: Inactive -->
<div class="group relative p-4 mb-2 rounded-xl border border-transparent hover:bg-white hover:border-slate-200 hover:shadow-sm cursor-pointer transition-all pl-6">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-slate-700 group-hover:text-slate-900 mb-1 transition-colors">China Urea Spot Price</h3>
<p class="text-sm text-slate-400 group-hover:text-slate-500 transition-colors">Doanh thu > Phân Ure</p>
</div>
<div class="w-2.5 h-2.5 rounded-full bg-emerald-500 mt-1.5 shadow-sm opacity-80"></div>
</div>
</div>
<!-- Item 3: Inactive -->
<div class="group relative p-4 rounded-xl border border-transparent hover:bg-white hover:border-slate-200 hover:shadow-sm cursor-pointer transition-all pl-6">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-slate-700 group-hover:text-slate-900 mb-1 transition-colors">Định giá DCM</h3>
<p class="text-sm text-slate-400 group-hover:text-slate-500 transition-colors">Khác > Định giá</p>
</div>
</div>
</div>
</div>
</div>
<!-- STREAMING_CHUNK:Right Chart Area - Header... -->
<!-- Cột phải: Khu vực Biểu đồ -->
<div class="flex-1 p-6 md:p-8 bg-white">
<!-- Chart Header: Tiêu đề & Filter -->
<div class="flex flex-col xl:flex-row xl:items-start justify-between gap-4 mb-8">
<!-- Thông tin biểu đồ -->
<div>
<div class="flex items-center gap-3 mb-3">
<h2 class="text-2xl font-bold text-slate-800">Giá khí</h2>
<!-- Badge mượt mà hơn -->
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium bg-rose-50 text-rose-600 border border-rose-100">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
Nghịch chiều
</span>
</div>
<div class="flex flex-wrap items-center gap-y-2 text-sm text-slate-500">
<div class="flex items-center gap-1.5 bg-slate-100 px-3 py-1 rounded-lg">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
<span>Chi phí</span>
<span class="text-slate-300 mx-1">›</span>
<span>Giá khí đầu vào</span>
</div>
<div class="flex items-center gap-1.5 ml-4">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>Cập nhật: 29/04/2026</span>
</div>
</div>
</div>
<!-- Thời gian Filters -->
<div class="inline-flex bg-slate-100/80 p-1 rounded-xl self-start border border-slate-200/60">
<button class="px-4 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-700 rounded-lg transition-colors">6T</button>
<button class="px-4 py-1.5 text-sm font-bold text-indigo-700 bg-white shadow-sm rounded-lg border border-slate-200/50">1N</button>
<button class="px-4 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-700 rounded-lg transition-colors">3N</button>
<button class="px-4 py-1.5 text-sm font-medium text-slate-500 hover:text-slate-700 rounded-lg transition-colors">All</button>
</div>
</div>
<!-- STREAMING_CHUNK:Chart Canvas... -->
<!-- Container cho Biểu đồ -->
<div class="relative w-full h-[400px]">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
<!-- STREAMING_CHUNK:Chart.js Initialization and Logic... -->
<script>
// Mock Data Generation cho biểu đồ trông giống thực tế
const generateDates = () => {
const dates = [];
let currentDate = new Date('2025-05-06');
for(let i=0; i<100; i++) {
dates.push(currentDate.toISOString().split('T')[0]);
currentDate.setDate(currentDate.getDate() + 3);
}
return dates;
};
const labels = generateDates();
// Data 1: Chỉ số Giá khí (Màu tím)
const dataIndex = [3.5, 3.8, 3.1, 3.4, 3.7, 3.2, 3.6, 4.0, 3.3, 3.5, 3.2, 3.4, 3.1, 3.3, 3.0, 2.9, 2.8, 2.7, 3.1, 3.0, 2.8, 3.1, 2.8, 3.0, 3.4, 3.2, 2.7, 3.5, 4.3, 4.5, 4.8, 5.3, 4.5, 3.9, 4.0, 3.8, 4.0, 3.7, 3.3, 3.1, 5.1, 3.2, 3.8, 3.5, 4.1, 3.4, 3.2, 2.8, 2.9, 3.2, 3.0, 3.1, 2.9, 2.7, 2.6, 2.7, 2.5, 2.6];
// Data 2: Giá cổ phiếu (Màu xám) - Nghịch chiều tương đối
const dataStock = [32, 31, 31, 30, 32, 33, 34, 34, 35, 36, 35, 36, 38, 41, 39, 42, 38, 39, 37, 38, 35, 37, 36, 37, 34, 35, 36, 33, 34, 33, 31, 32, 33, 32, 31, 32, 34, 36, 37, 39, 36, 37, 40, 38, 39, 43, 49, 48, 45, 49, 47, 40, 44, 46, 44, 47, 45, 46, 43, 39, 39];
// Đảm bảo độ dài mảng khớp nhau cho demo
const fillArray = (arr, len) => {
while(arr.length < len) arr.push(arr[arr.length-1] + (Math.random() - 0.5) * 0.5);
return arr.slice(0, len);
};
const len = labels.length;
const finalDataIndex = fillArray(dataIndex, len);
const finalDataStock = fillArray(dataStock, len);
const ctx = document.getElementById('myChart').getContext('2d');
// Tạo Gradient cho đường nét chính (Màu tím)
let gradientPurple = ctx.createLinearGradient(0, 0, 0, 400);
gradientPurple.addColorStop(0, 'rgba(99, 102, 241, 0.2)'); // Indigo-500 with opacity
gradientPurple.addColorStop(1, 'rgba(99, 102, 241, 0)');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Chỉ số Giá khí',
data: finalDataIndex,
borderColor: '#6366f1', // Indigo 500
backgroundColor: gradientPurple,
borderWidth: 2.5,
pointRadius: 0, // Ẩn điểm để đường trơn tru hơn
pointHoverRadius: 6,
pointBackgroundColor: '#fff',
pointBorderColor: '#6366f1',
pointBorderWidth: 2,
tension: 0.3, // Đường cong mềm mại
fill: true, // Kích hoạt fill gradient
yAxisID: 'y'
},
{
label: 'Giá cổ phiếu',
data: finalDataStock,
borderColor: '#94a3b8', // Slate 400
borderWidth: 2,
borderDash: [5, 5], // Nét đứt nhẹ cho đường phụ
pointRadius: 0,
pointHoverRadius: 6,
pointBackgroundColor: '#fff',
pointBorderColor: '#94a3b8',
pointBorderWidth: 2,
tension: 0.3,
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: {
display: false // Ẩn legend mặc định vì đã có title rõ ràng
},
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.95)',
titleColor: '#1e293b',
bodyColor: '#475569',
borderColor: '#e2e8f0',
borderWidth: 1,
padding: 12,
boxPadding: 6,
usePointStyle: true,
titleFont: {
family: 'Inter',
size: 13,
weight: '600'
},
bodyFont: {
family: 'Inter',
size: 13
},
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y.toFixed(2);
}
return label;
}
}
}
},
scales: {
x: {
grid: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 6, // Rút gọn nhãn trục X
color: '#94a3b8',
font: {
family: 'Inter',
size: 11
}
}
},
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: 'Chỉ số Giá khí',
color: '#4f46e5', // Indigo 600
font: {
family: 'Inter',
weight: '600',
size: 12
}
},
grid: {
color: '#f1f5f9',
drawBorder: false
},
ticks: {
color: '#64748b',
font: { family: 'Inter', size: 11 }
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: 'Giá cổ phiếu',
color: '#64748b',
font: {
family: 'Inter',
weight: '600',
size: 12
}
},
grid: {
display: false, // Ẩn lưới trục Y phụ để tránh rối mắt
drawBorder: false
},
ticks: {
color: '#64748b',
font: { family: 'Inter', size: 11 }
}
}
}
}
});
</script>
</body>
</html>
```eofLanding Page
This ad does not have a landing page available
Network Timeline
Performance Summary
8
Requests
5
Domains
353KB
Transfer Size
768KB
Content Size
594.0ms
Dom Content Loaded
616.0ms
First Paint
792.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...