优化
This commit is contained in:
zpc
parent
988241c2c4
commit
8f8353f17a
|
|
@ -17,19 +17,22 @@ else
|
|||
<div class="ct-page">
|
||||
<div class="ct-section-title">7、性格类型</div>
|
||||
|
||||
<!-- 上半部分：环形图 + 雷达图 + 柱状图 -->
|
||||
<!-- 上半部分：环形图 + 雷达图 + 横向柱状图 -->
|
||||
<div class="ct-charts">
|
||||
<!-- 左：环形图 -->
|
||||
<div class="ct-chart-panel ct-panel-donut">
|
||||
<div class="ct-chart-title">性格类型</div>
|
||||
<canvas id="donutChart" width="300" height="300"></canvas>
|
||||
</div>
|
||||
<!-- 中：雷达图 -->
|
||||
<div class="ct-chart-panel">
|
||||
<div class="ct-chart-title">性格类型</div>
|
||||
<canvas id="radarChart" width="340" height="300"></canvas>
|
||||
<canvas id="radarChart" width="380" height="380"></canvas>
|
||||
</div>
|
||||
<div class="ct-chart-panel">
|
||||
<!-- 右：横向柱状图 -->
|
||||
<div class="ct-chart-panel ct-panel-bar">
|
||||
<div class="ct-chart-title">性格类型排名</div>
|
||||
<canvas id="barChart" width="380" height="300"></canvas>
|
||||
<canvas id="barChart" width="420" height="380"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,6 +87,8 @@ else
|
|||
|
||||
var colors = ['#4A90E2', '#52A06A', '#F5A623', '#E88B9C', '#2ABFBF'];
|
||||
var colorsAlpha = ['rgba(74,144,226,0.7)', 'rgba(82,160,106,0.7)', 'rgba(245,166,35,0.7)', 'rgba(232,139,156,0.7)', 'rgba(42,191,191,0.7)'];
|
||||
// 横向柱状图颜色（按排名顺序）
|
||||
var barColors = ['#2ABFBF', '#E88B9C', '#F5C842', '#52A06A', '#4A90E2'];
|
||||
|
||||
// ---- 环形图 ----
|
||||
var donutLabelPlugin = {
|
||||
|
|
@ -93,18 +98,25 @@ else
|
|||
var meta = chart.getDatasetMeta(0);
|
||||
var dataset = chart.data.datasets[0];
|
||||
var total = dataset.data.reduce(function(a, b) { return a + b; }, 0);
|
||||
ctx.font = 'bold 12px "Microsoft YaHei", sans-serif';
|
||||
ctx.font = 'bold 10px "Microsoft YaHei", sans-serif';
|
||||
ctx.textBaseline = 'middle';
|
||||
meta.data.forEach(function(arc, i) {
|
||||
var pct = (dataset.data[i] / total * 100).toFixed(2) + '%';
|
||||
var name = chart.data.labels[i];
|
||||
var angle = (arc.startAngle + arc.endAngle) / 2;
|
||||
var x = arc.x + Math.cos(angle) * (arc.outerRadius + 30);
|
||||
var y = arc.y + Math.sin(angle) * (arc.outerRadius + 30);
|
||||
var labelR = arc.outerRadius + 18;
|
||||
var x = arc.x + Math.cos(angle) * labelR;
|
||||
var y = arc.y + Math.sin(angle) * labelR;
|
||||
if (Math.cos(angle) < -0.1) {
|
||||
ctx.textAlign = 'right';
|
||||
} else if (Math.cos(angle) > 0.1) {
|
||||
ctx.textAlign = 'left';
|
||||
} else {
|
||||
ctx.textAlign = 'center';
|
||||
}
|
||||
ctx.fillStyle = dataset.backgroundColor[i];
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(name, x, y - 8);
|
||||
ctx.fillText(pct, x, y + 8);
|
||||
ctx.fillText(name, x, y - 7);
|
||||
ctx.fillText(pct, x, y + 7);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -113,28 +125,42 @@ else
|
|||
new Chart(ctxDonut, {
|
||||
type: 'doughnut',
|
||||
data: { labels: labels, datasets: [{ data: scores, backgroundColor: colors, borderWidth: 2, borderColor: '#fff' }] },
|
||||
options: { responsive: false, cutout: '50%', plugins: { legend: { display: false } }, layout: { padding: 40 } },
|
||||
options: { responsive: false, cutout: '50%', plugins: { legend: { display: false } }, layout: { padding: { top: 44, bottom: 44, left: 50, right: 50 } } },
|
||||
plugins: [donutLabelPlugin]
|
||||
});
|
||||
|
||||
// ---- 雷达图 ----
|
||||
var radarColor = '#E88B9C';
|
||||
var radarColor = '#4A90E2';
|
||||
var ctxRadar = document.getElementById('radarChart').getContext('2d');
|
||||
new Chart(ctxRadar, {
|
||||
type: 'radar',
|
||||
data: { labels: labels, datasets: [{ data: scores, backgroundColor: 'rgba(232,139,156,0.12)', borderColor: 'rgba(232,139,156,0.8)', borderWidth: 2, pointBackgroundColor: 'rgba(232,139,156,0.9)', pointBorderColor: '#fff', pointRadius: 4, pointBorderWidth: 1 }] },
|
||||
options: { responsive: false, plugins: { legend: { display: false } }, scales: { r: { beginAtZero: true, max: maxScore, ticks: { stepSize: 2, font: { size: 10 }, backdropColor: 'transparent', color: '#999' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#333', padding: 8 }, grid: { color: 'rgba(0,0,0,0.06)' }, angleLines: { color: 'rgba(0,0,0,0.06)' } } } },
|
||||
data: { labels: labels, datasets: [{ data: scores, backgroundColor: 'rgba(74,144,226,0.15)', borderColor: 'rgba(74,144,226,0.8)', borderWidth: 2, pointBackgroundColor: 'rgba(74,144,226,0.9)', pointBorderColor: '#fff', pointRadius: 4, pointBorderWidth: 1 }] },
|
||||
options: { responsive: false, plugins: { legend: { display: false } }, scales: { r: { beginAtZero: true, max: maxScore, ticks: { stepSize: 2, font: { size: 11 }, backdropColor: 'transparent', color: '#999' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#333', padding: 10 }, grid: { color: 'rgba(0,0,0,0.06)' }, angleLines: { color: 'rgba(0,0,0,0.06)' } } } },
|
||||
plugins: [{ afterDatasetsDraw: function(chart) { var meta = chart.getDatasetMeta(0); var ctx2 = chart.ctx; ctx2.font = 'bold 11px sans-serif'; ctx2.fillStyle = radarColor; ctx2.textBaseline = 'middle'; meta.data.forEach(function(point, i) { var val = scores[i]; var cx = chart.scales.r.xCenter; var cy = chart.scales.r.yCenter; var dx = point.x - cx, dy = point.y - cy; var dist = Math.sqrt(dx*dx+dy*dy) || 1; ctx2.textAlign = 'center'; ctx2.fillText(val, point.x + (dx/dist)*14, point.y + (dy/dist)*14); }); } }]
|
||||
});
|
||||
|
||||
// ---- 竖向柱状图 ----
|
||||
var barDataLabelPlugin = { id: 'barDataLabels', afterDatasetsDraw: function(chart) { var ctx = chart.ctx; var meta = chart.getDatasetMeta(0); var dataset = chart.data.datasets[0]; ctx.font = 'bold 12px "Microsoft YaHei", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; meta.data.forEach(function(bar, i) { ctx.fillStyle = '#333'; ctx.fillText(dataset.data[i], bar.x, bar.y - 4); }); } };
|
||||
// ---- 横向柱状图 ----
|
||||
var barDataLabelPlugin = {
|
||||
id: 'barDataLabels',
|
||||
afterDatasetsDraw: function(chart) {
|
||||
var ctx = chart.ctx;
|
||||
var meta = chart.getDatasetMeta(0);
|
||||
var dataset = chart.data.datasets[0];
|
||||
ctx.font = 'bold 12px "Microsoft YaHei", sans-serif';
|
||||
ctx.textBaseline = 'middle';
|
||||
meta.data.forEach(function(bar, i) {
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText(dataset.data[i], bar.x + 6, bar.y);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var ctxBar = document.getElementById('barChart').getContext('2d');
|
||||
new Chart(ctxBar, {
|
||||
type: 'bar',
|
||||
data: { labels: barLabels, datasets: [{ data: barScores, backgroundColor: colorsAlpha, borderColor: colors, borderWidth: 0, borderRadius: 3, barThickness: 40 }] },
|
||||
options: { responsive: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, max: barMax, ticks: { stepSize: 2, font: { size: 10 }, color: '#999' }, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { ticks: { font: { size: 11 }, color: '#666' }, grid: { display: false } } }, layout: { padding: { top: 20 } } },
|
||||
data: { labels: barLabels, datasets: [{ data: barScores, backgroundColor: barColors, borderWidth: 0, borderRadius: 4, barThickness: 32 }] },
|
||||
options: { responsive: false, indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { beginAtZero: true, max: barMax, ticks: { stepSize: 2, font: { size: 11 }, color: '#999' }, grid: { color: 'rgba(0,0,0,0.05)' } }, y: { ticks: { font: { size: 12 }, color: '#666' }, grid: { display: false } } }, layout: { padding: { right: 24, top: 10 } } },
|
||||
plugins: [barDataLabelPlugin]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@ else
|
|||
{
|
||||
<div class="cover-page">
|
||||
<!-- 测评报告标题图片 -->
|
||||
<div class="cover-title">
|
||||
<img src="@(Configuration["AppSettings:CdnPrefix"])/images/cover/title.jpg" alt="测评报告" />
|
||||
</div>
|
||||
|
||||
<!-- 八大智能拼图环形图 -->
|
||||
<div class="cover-wheel">
|
||||
|
|
|
|||
|
|
@ -11,13 +11,15 @@
|
|||
<div class="disc-card">
|
||||
<div class="disc-badge">特此说明</div>
|
||||
<div class="disc-content">
|
||||
<p>1、本次解读分析数据均来源于您的自测结果；</p>
|
||||
<p>2、您的成长会因为环境、时间的变化而变化，建议您每年测评一次，跟踪变化，了解成长中的自己！</p>
|
||||
<p>3、解读报告最终解释权归本机构所有；</p>
|
||||
<p>1、本次分析基于您的自测结果；</p>
|
||||
<p>2、使用本报告需以开放心态结合动态观察，让测评真正成为支持成长的工具，而非限制发展的枷锁；</p>
|
||||
<p>3、本机构拥有分析报告的最终解释权。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="disc-footer">
|
||||
<span class="disc-footer-left"></span>
|
||||
<span class="disc-footer-right">小程序：学业邑规划</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Styles {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* ============================================
|
||||
性格类型分析页（三图+结论卡片版）
|
||||
性格类型分析页（环形图+雷达图+横向柱状图+结论卡片）
|
||||
页面固定尺寸：1309×926px
|
||||
============================================ */
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ct-section-title {
|
||||
|
|
@ -17,9 +17,10 @@
|
|||
color: #E67E73;
|
||||
}
|
||||
|
||||
/* ---- 上半部分：三图并排 ---- */
|
||||
.ct-charts {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +31,13 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.ct-panel-donut { flex: 0.9; }
|
||||
.ct-panel-donut {
|
||||
flex: 0.8;
|
||||
}
|
||||
|
||||
.ct-panel-bar {
|
||||
flex: 1.1;
|
||||
}
|
||||
|
||||
.ct-chart-title {
|
||||
font-size: 16px;
|
||||
|
|
@ -40,6 +47,7 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- 下半部分：结论卡片 ---- */
|
||||
.ct-conclusions {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
}
|
||||
|
||||
.cover-wheel img {
|
||||
max-width: 680px;
|
||||
max-height: 460px;
|
||||
max-width: 740px;
|
||||
max-height: 580px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -296,13 +296,12 @@ $login-btn-active: #E09518;
|
|||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
padding-top: 180rpx;
|
||||
|
||||
.logo-wrapper {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
border: 2rpx solid $border-color;
|
||||
border-radius: $border-radius-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user