/**
* 问吉 - 专业命理分析系统
* 图表工具库 - 封装各类图表渲染函数
*/
/**
* 渲染五行分布饼图
* @param {Array} elements - 五行元素数据数组
* @param {string} containerId - 图表容器ID
*/
function renderWuxingChart(elements, containerId) {
if (!elements || elements.length === 0) return;
const ctx = document.getElementById(containerId);
if (!ctx) return;
const labels = elements.map(e => e.element);
const data = elements.map(e => e.count);
// 使用数据文件中定义的颜色
const backgroundColors = elements.map(e => WUXING_COLORS[e.element] || '#ccc');
// 检查是否为移动设备
const isMobile = window.innerWidth <= 768;
// 创建新图表实例
const chartInstance = new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: backgroundColors,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.8)'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: isMobile ? 'bottom' : 'right',
labels: {
font: {
family: '"Microsoft YaHei", sans-serif',
size: isMobile ? 8 : 12
},
padding: isMobile ? 2 : 10,
boxWidth: isMobile ? 6 : 30,
boxHeight: isMobile ? 6 : 10,
},
align: isMobile ? 'center' : 'center',
display: true,
maxWidth: isMobile ? 100 : 180,
maxHeight: isMobile ? 50 : 100,
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.raw || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / total) * 100);
return `${label}: ${value} (${percentage}%)`;
}
},
padding: 10,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: '#333',
bodyColor: '#333',
borderColor: '#ddd',
borderWidth: 1,
boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
cornerRadius: 8
}
},
animation: {
animateScale: true,
animateRotate: true,
duration: 1000,
easing: 'easeOutQuart'
},
layout: {
padding: isMobile ? 1 : 8
}
}
});
// 将图表实例存储到canvas元素上，以便后续可能的销毁
ctx.chart = chartInstance;
// 确保在窗口大小变化时更新图表大小
window.addEventListener('resize', function() {
const newIsMobile = window.innerWidth <= 768;
if (newIsMobile !== isMobile) {
// 窗口大小变化导致设备类型变化时重新渲染图表
// 先销毁旧图表
if (ctx.chart) {
ctx.chart.destroy();
}
renderWuxingChart(elements, containerId);
}
});
return chartInstance;
}
/**
* 根据阴阳百分比获取匹配的评价类别
* @param {number} yinPercent - 阴的百分比
* @returns {string} 匹配的类别
*/
function getYinYangCategory(yinPercent) {
if (yinPercent < 12.5) return "0%阴 100%阳";
else if (yinPercent < 37.5) return "25%阴 75%阳";
else if (yinPercent < 62.5) return "50%阴 50%阳";
else if (yinPercent < 87.5) return "75%阴 25%阳";
else return "100%阴 0%阳";
}
/**
* 生成阴阳比例分析HTML
* @param {Object} yinyangData - 阴阳数据对象
* @returns {string} 生成的HTML代码
*/
function generateYinYangAnalysisHTML(yinyangData) {
if (!yinyangData) return '';
const yinPercent = yinyangData.yin_percent;
const yangPercent = yinyangData.yang_percent;
// 获取匹配的阴阳类别
const matchedCategory = getYinYangCategory(yinPercent);
const evaluation = YINYANG_EVALUATIONS["阴阳比例"][matchedCategory]["评价"];
// 生成阴阳比例图表
const yinyangChartHTML = `
阳 ${yangPercent}%
阴 ${yinPercent}%
`;
// 生成分析内容HTML - 直接返回内容，不包含容器
const analysisHtml = `
${yinyangChartHTML}
阴阳比例分析
调整建议
${evaluation["调整建议"]}
${YINYANG_EVALUATIONS["演算法则"]}
`;
return analysisHtml;
}