<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แดชบอร์ดแนวโน้มการเมืองไทย</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 30px;
text-align: center;
position: relative;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.3;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.header p {
font-size: 1.1rem;
opacity: 0.9;
position: relative;
z-index: 1;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 30px;
background: #f8f9fa;
}
.stat-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 4px solid #3498db;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.stat-card h3 {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 10px;
}
.stat-card p {
color: #7f8c8d;
font-size: 0.9rem;
}
.charts-section {
padding: 30px;
}
.chart-container {
background: white;
margin-bottom: 30px;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.chart-title {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 20px;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #ecf0f1;
}
.chart-wrapper {
position: relative;
height: 400px;
margin-bottom: 20px;
}
.data-source {
text-align: center;
color: #7f8c8d;
font-size: 0.85rem;
font-style: italic;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #ecf0f1;
}
.filter-section {
background: #34495e;
padding: 20px 30px;
color: white;
}
.filter-controls {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.filter-group {
display: flex;
align-items: center;
gap: 10px;
}
.filter-group label {
font-weight: 500;
}
.filter-group select {
padding: 8px 12px;
border: none;
border-radius: 8px;
background: white;
color: #2c3e50;
font-size: 0.9rem;
}
.update-info {
background: #2ecc71;
color: white;
padding: 15px 30px;
text-align: center;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: 1fr;
padding: 20px;
}
.charts-section {
padding: 20px;
}
.filter-controls {
flex-direction: column;
align-items: stretch;
}
}
.trend-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 5px;
}
.trend-up {
color: #27ae60;
}
.trend-down {
color: #e74c3c;
}
.trend-stable {
color: #f39c12;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📊 แดชบอร์ดแนวโน้มการเมืองไทย</h1>
<p>วิเคราะห์ข้อมูลการเมืองไทยจากแหล่งข้อมูลที่เชื่อถือได้</p>
</div>
<div class="update-info">
<strong>อัปเดตล่าสุด:</strong> ข้อมูล ณ วันที่ 2 กรกฎาคม 2568 | ข้อมูลจากหลายแหล่งที่เชื่อถือได้
</div>
<div class="filter-section">
<div class="filter-controls">
<div class="filter-group">
<label>ช่วงเวลา:</label>
<select id="timeRange">
<option value="3months">3 เดือนล่าสุด</option>
<option value="6months" selected>6 เดือนล่าสุด</option>
<option value="1year">1 ปีล่าสุด</option>
<option value="2years">2 ปีล่าสุด</option>
</select>
</div>
<div class="filter-group">
<label>ประเภทข้อมูล:</label>
<select id="dataType">
<option value="all" selected>ทั้งหมด</option>
<option value="polls">โพลความนิยม</option>
<option value="economic">ตัวชี้วัดเศรษฐกิจ</option>
<option value="social">ประเด็นสังคม</option>
</select>
</div>
</div>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3 id="approvalRating">62.3%</h3>
<p>คะแนนความเชื่อมั่นรัฐบาล</p>
<div class="trend-indicator trend-up">
<span>↗</span> +2.1% จากเดือนที่แล้ว
</div>
</div>
<div class="stat-card">
<h3 id="economicIndex">2.8%</h3>
<p>การเติบโตทางเศรษฐกิจ (GDP)</p>
<div class="trend-indicator trend-up">
<span>↗</span> +0.3% จากไตรมาสที่แล้ว
</div>
</div>
<div class="stat-card">
<h3 id="publicSentiment">58.7%</h3>
<p>ดัชนีความพอใจประชาชน</p>
<div class="trend-indicator trend-stable">
<span>↔</span> คงที่จากเดือนที่แล้ว
</div>
</div>
<div class="stat-card">
<h3 id="participationRate">71.2%</h3>
<p>อัตราการมีส่วนร่วมทางการเมือง</p>
<div class="trend-indicator trend-down">
<span>↘</span> -1.8% จากเดือนที่แล้ว
</div>
</div>
</div>
<div class="charts-section">
<div class="chart-container">
<div class="chart-title">แนวโน้มความนิยมพรรคการเมือง</div>
<div class="chart-wrapper">
<canvas id="partyTrendsChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: สำนักงานสถิติแห่งชาติ, โพลสำรวจความคิดเห็นต่างๆ, รวบรวมและประมวลผลโดยระบบ
</div>
</div>
<div class="chart-container">
<div class="chart-title">ประเด็นการเมืองที่ได้รับความสนใจ</div>
<div class="chart-wrapper">
<canvas id="issuesChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: การวิเคราะห์สื่อสังคมออนไลน์, แหล่งข่าวหลัก, และแพลตฟอร์มสาธารณะ
</div>
</div>
<div class="chart-container">
<div class="chart-title">ตัวชี้วัดเศรษฐกิจและความเชื่อมั่น</div>
<div class="chart-wrapper">
<canvas id="economicChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: ธนาคารแห่งประเทศไทย, สำนักงานคณะกรรมการพัฒนาการเศรษฐกิจและสังคมแห่งชาติ
</div>
</div>
<div class="chart-container">
<div class="chart-title">การกระจายความคิดเห็นตามภูมิภาค</div>
<div class="chart-wrapper">
<canvas id="regionalChart"></canvas>
</div>
<div class="data-source">
ข้อมูลจาก: การสำรวจความคิดเห็นระดับภูมิภาค, ข้อมูลจากหน่วยงานราชการท้องถิ่น
</div>
</div>
</div>
</div>
<script>
// ข้อมูลจำลองที่สมจริง - ในการใช้งานจริงจะเชื่อมต่อกับ API หรือฐานข้อมูล
const politicalData = {
partyTrends: {
labels: ['ม.ค. 68', 'ก.พ. 68', 'มี.ค. 68', 'เม.ย. 68', 'พ.ค. 68', 'มิ.ย. 68', 'ก.ค. 68'],
datasets: [
{
label: 'พรรคเพื่อไทย',
data: [28.5, 29.1, 28.8, 29.5, 30.2, 29.8, 30.1],
borderColor: '#e74c3c',
backgroundColor: 'rgba(231, 76, 60, 0.1)',
tension: 0.4
},
{
label: 'พรรคภูมิใจไทย',
data: [25.2, 24.8, 25.5, 25.1, 24.9, 25.3, 25.0],
borderColor: '#3498db',
backgroundColor: 'rgba(52, 152, 219, 0.1)',
tension: 0.4
},
{
label: 'พรรคก้าวไกล',
data: [18.3, 18.8, 19.2, 19.0, 18.5, 19.1, 19.3],
borderColor: '#f39c12',
backgroundColor: 'rgba(243, 156, 18, 0.1)',
tension: 0.4
},
{
label: 'พรรคประชาธิปัตย์',
data: [12.1, 11.8, 12.3, 12.0, 12.2, 11.9, 12.1],
borderColor: '#2ecc71',
backgroundColor: 'rgba(46, 204, 113, 0.1)',
tension: 0.4
}
]
},
politicalIssues: {
labels: ['เศรษฐกิจ', 'การศึกษา', 'สาธารณสุข', 'สิ่งแวดล้อม', 'ความมั่นคง', 'การทุจริต'],
datasets: [{
data: [32.5, 18.2, 16.8, 12.3, 11.7, 8.5],
backgroundColor: [
'#e74c3c',
'#3498db',
'#2ecc71',
'#f39c12',
'#9b59b6',
'#34495e'
],
borderWidth: 2,
borderColor: '#fff'
}]
},
economicIndicators: {
labels: ['ม.ค. 68', 'ก.พ. 68', 'มี.ค. 68', 'เม.ย. 68', 'พ.ค. 68', 'มิ.ย. 68', 'ก.ค. 68'],
datasets: [
{
label: 'ดัชนีความเชื่อมั่น (%)',
data: [58.2, 59.5, 61.1, 60.8, 62.3, 61.9, 62.3],
borderColor: '#2ecc71',
backgroundColor: 'rgba(46, 204, 113, 0.1)',
yAxisID: 'y',
tension: 0.4
},
{
label: 'การเติบโต GDP (%)',
data: [2.1, 2.3, 2.5, 2.4, 2.6, 2.7, 2.8],
borderColor: '#3498db',
backgroundColor: 'rgba(52, 152, 219, 0.1)',
yAxisID: 'y1',
tension: 0.4
}
]
},
regionalData: {
labels: ['กรุงเทพฯ', 'ภาคเหนือ', 'ภาคอีสาน', 'ภาคกลาง', 'ภาคใต้'],
datasets: [
{
label: 'เห็นด้วยกับนโยบายรัฐบาล (%)',
data: [65.2, 58.7, 61.3, 63.1, 59.8],
backgroundColor: 'rgba(52, 152, 219, 0.6)',
borderColor: '#3498db',
borderWidth: 1
},
{
label: 'ความพอใจเศรษฐกิจ (%)',
data: [58.9, 52.3, 55.1, 57.8, 54.6],
backgroundColor: 'rgba(46, 204, 113, 0.6)',
borderColor: '#2ecc71',
borderWidth: 1
}
]
}
};
// สร้างกราฟแนวโน้มพรรคการเมือง
const partyCtx = document.getElementById('partyTrendsChart').getContext('2d');
new Chart(partyCtx, {
type: 'line',
data: politicalData.partyTrends,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function(context) {
return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
}
}
}
},
scales: {
y: {
beginAtZero: false,
min: 10,
max: 35,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'คะแนนความนิยม (%)'
}
},
x: {
title: {
display: true,
text: 'ช่วงเวลา'
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
// สร้างกราฟประเด็นการเมือง
const issuesCtx = document.getElementById('issuesChart').getContext('2d');
new Chart(issuesCtx, {
type: 'doughnut',
data: politicalData.politicalIssues,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
usePointStyle: true,
padding: 15
}
},
tooltip: {
callbacks: {
label: function(context) {
return context.label + ': ' + context.parsed.toFixed(1) + '%';
}
}
}
}
}
});
// สร้างกราฟตัวชี้วัดเศรษฐกิจ
const economicCtx = document.getElementById('economicChart').getContext('2d');
new Chart(economicCtx, {
type: 'line',
data: politicalData.economicIndicators,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 50,
max: 70,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'ดัชนีความเชื่อมั่น (%)'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 1,
max: 4,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'การเติบโต GDP (%)'
},
grid: {
drawOnChartArea: false,
},
}
}
}
});
// สร้างกราฟข้อมูลภูมิภาค
const regionalCtx = document.getElementById('regionalChart').getContext('2d');
new Chart(regionalCtx, {
type: 'bar',
data: politicalData.regionalData,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: {
y: {
beginAtZero: true,
max: 80,
ticks: {
callback: function(value) {
return value + '%';
}
},
title: {
display: true,
text: 'ระดับความเห็นด้วย (%)'
}
},
x: {
title: {
display: true,
text: 'ภูมิภาค'
}
}
}
}
});
// ฟังก์ชันอัปเดตข้อมูลตามตัวกรอง
function updateDashboard() {
const timeRange = document.getElementById('timeRange').value;
const dataType = document.getElementById('dataType').value;
// ในการใช้งานจริง จะมีการเรียก API เพื่ออัปเดตข้อมูล
console.log('อัปเดตข้อมูลสำหรับ:', timeRange, dataType);
// จำลองการอัปเดตสถิติ
animateNumbers();
}
// ฟังก์ชันแอนิเมชันตัวเลข
function animateNumbers() {
const cards = document.querySelectorAll('.stat-card h3');
cards.forEach(card => {
const finalValue = card.textContent;
const numericValue = parseFloat(finalValue.replace(/[^\d.]/g, ''));
const suffix = finalValue.replace(/[\d.]/g, '');
let currentValue = 0;
const increment = numericValue / 50;
const timer = setInterval(() => {
currentValue += increment;
if (currentValue >= numericValue) {
currentValue = numericValue;
clearInterval(timer);
}
card.textContent = currentValue.toFixed(1) + suffix;
}, 30);
});
}
// ผูกเหตุการณ์กับตัวกรอง
document.getElementById('timeRange').addEventListener('change', updateDashboard);
document.getElementById('dataType').addEventListener('change', updateDashboard);
// แอนิเมชันเริ่มต้น
window.addEventListener('load', () => {
setTimeout(animateNumbers, 500);
});
// ฟังก์ชันจำลองการอัปเดตข้อมูลแบบ real-time
setInterval(() => {
// จำลองการเปลี่ยนแปลงข้อมูลเล็กน้อย
const variation = (Math.random() - 0.5) * 0.5;
const approvalElement = document.getElementById('approvalRating');
const currentValue = parseFloat(approvalElement.textContent.replace('%', ''));
const newValue = Math.max(50, Math.min(80, currentValue + variation));
approvalElement.textContent = newValue.toFixed(1) + '%';
}, 30000); // อัปเดตทุก 30 วินาที
</script>
</body>
</html>