<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
canvas {
max-width: 800px;
margin: 10px auto;
display: block;
}
</style>
<canvas id="pieChart"></canvas>
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
let supabase;
let pie_data = [];
function drawChart() {
// ラベルとデータを抽出
const labels = pie_data.map(row => `頻度${row.frequency}`);
const dataValues = pie_data.map(row => row.person_count);
// 背景色の自動設定（色数不足への対策も可）
const backgroundColors = [
'#FF6384', '#36A2EB', '#FFCE56', '#8BC34A', '#FF9800',
'#9C27B0', '#00BCD4', '#CDDC39', '#795548', '#607D8B'
];
const data = {
labels: labels,
datasets: [{
label: '人数',
data: dataValues,
backgroundColor: backgroundColors.slice(0, dataValues.length),
borderColor: '#fff',
borderWidth: 1
}]
};
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
layout: {
padding: 4
},
plugins: {
title: {
display: true,
text: 'PC学習室 利用頻度の分布',
font: {
size: 20
}
},
legend: {
position: 'right',
labels: {
font: {
size: 16
}
}
}
}
}
};
// 既存のチャートを破棄（再描画時にエラー防止）
if (window.myChart) {
window.myChart.destroy();
}
const ctx = document.getElementById('pieChart').getContext('2d');
window.myChart = new Chart(ctx, config);
}
async function fetchData() {
const { data, error } = await supabase.rpc('frequency_of_frequency');
if (error) {
console.error('データ取得エラー:', error.message);
return;
}
if (data.length === 0) {
console.warn('データがありません');
return;
}
pie_data = data;
drawChart();
}
function openSupabase() {
const supabaseUrl = 'https://（非公開）.supabase.co';
const supabaseKey1 = '（非公開）';
const supabaseKey2 = '（非公開）';
const supabaseKey3 = '（非公開）';
const supabaseKey4 = '（非公開）';
const supabaseKey = supabaseKey1 + '.' + supabaseKey2 + 'wicm' + supabaseKey3 + '.' + supabaseKey4;
supabase = window.supabase.createClient(supabaseUrl, supabaseKey);
fetchData();
}
openSupabase();
</script>