汇报ppt、视频、软件用户手册 #21

Merged
p5i4afnyx merged 1 commits from cxf into main 1 month ago

Binary file not shown.

@ -1152,93 +1152,139 @@ if __name__ == "__main__":
// 初始化分布图表
initDistributionChart() {
const ctx = document.getElementById('distribution-canvas').getContext('2d');
this.charts.distribution = new Chart(ctx, {
type: 'bar',
data: {
labels: this.mockData.openrankDistribution.map(d => d.range),
datasets: [{
label: '开发者数量',
data: this.mockData.openrankDistribution.map(d => d.count),
backgroundColor: 'rgba(0, 212, 255, 0.6)',
borderColor: 'rgba(0, 212, 255, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#ffffff'
}
}
try {
const canvas = document.getElementById('distribution-canvas');
if (!canvas) {
console.warn('Distribution canvas not found');
return;
}
const ctx = canvas.getContext('2d');
if (typeof Chart === 'undefined') {
console.error('Chart.js is not loaded');
// 显示错误信息
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#666';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText('图表库加载失败', canvas.width/2, canvas.height/2 - 10);
ctx.font = '12px Arial';
ctx.fillText('图表功能暂不可用', canvas.width/2, canvas.height/2 + 10);
return;
}
this.charts.distribution = new Chart(ctx, {
type: 'bar',
data: {
labels: this.mockData.openrankDistribution.map(d => d.range),
datasets: [{
label: '开发者数量',
data: this.mockData.openrankDistribution.map(d => d.count),
backgroundColor: 'rgba(0, 212, 255, 0.6)',
borderColor: 'rgba(0, 212, 255, 1)',
borderWidth: 1
}]
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#ffffff'
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: '#ffffff'
}
}
},
x: {
grid: {
color: 'rgba(255, 255, 255, 0.1)'
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#ffffff'
}
},
ticks: {
color: '#ffffff'
x: {
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#ffffff'
}
}
}
}
}
});
});
} catch (error) {
console.error('Error initializing distribution chart:', error);
}
}
// 初始化活动类型图表
initActivityChart() {
const ctx = document.getElementById('activity-canvas').getContext('2d');
this.charts.activity = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Issue 评论', '创建 Issue', '创建 PR', '代码评审', '合入 PR'],
datasets: [{
data: [
this.mockData.activityDistribution.issueComment,
this.mockData.activityDistribution.openIssue,
this.mockData.activityDistribution.openPull,
this.mockData.activityDistribution.reviewComment,
this.mockData.activityDistribution.mergedPull
],
backgroundColor: [
'rgba(0, 212, 255, 0.8)',
'rgba(0, 255, 136, 0.8)',
'rgba(255, 193, 7, 0.8)',
'rgba(156, 39, 176, 0.8)',
'rgba(255, 87, 34, 0.8)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
color: '#ffffff',
font: {
size: 12
try {
const canvas = document.getElementById('activity-canvas');
if (!canvas) {
console.warn('Activity canvas not found');
return;
}
const ctx = canvas.getContext('2d');
if (typeof Chart === 'undefined') {
console.error('Chart.js is not loaded');
// 显示错误信息
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#666';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText('图表库加载失败', canvas.width/2, canvas.height/2 - 10);
ctx.font = '12px Arial';
ctx.fillText('图表功能暂不可用', canvas.width/2, canvas.height/2 + 10);
return;
}
this.charts.activity = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Issue 评论', '创建 Issue', '创建 PR', '代码评审', '合入 PR'],
datasets: [{
data: [
this.mockData.activityDistribution.issueComment,
this.mockData.activityDistribution.openIssue,
this.mockData.activityDistribution.openPull,
this.mockData.activityDistribution.reviewComment,
this.mockData.activityDistribution.mergedPull
],
backgroundColor: [
'rgba(0, 212, 255, 0.8)',
'rgba(0, 255, 136, 0.8)',
'rgba(255, 193, 7, 0.8)',
'rgba(156, 39, 176, 0.8)',
'rgba(255, 87, 34, 0.8)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
color: '#ffffff',
font: {
size: 12
}
}
}
}
}
}
});
});
} catch (error) {
console.error('Error initializing activity chart:', error);
}
}
// 初始化网络图谱

@ -355,7 +355,47 @@ if __name__ == '__main__':
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Chart.js CDN with fallback -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script>
// Fallback to local Chart.js if CDN fails
if (typeof Chart === 'undefined') {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"><\/script>');
}
// Final fallback - load minimal mock if both CDN fail
setTimeout(function() {
if (typeof Chart === 'undefined') {
console.warn('Chart.js failed to load from CDN, creating minimal mock');
window.Chart = function(ctx, config) {
this.ctx = ctx;
this.config = config;
// Mock implementation to prevent errors
this.destroy = function() {};
this.update = function() {};
this.resize = function() {};
// Draw a simple placeholder
if (ctx && ctx.canvas) {
const canvas = ctx.canvas;
const width = canvas.width || 300;
const height = canvas.height || 200;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#666';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText('Chart.js 加载失败', width/2, height/2 - 10);
ctx.font = '12px Arial';
ctx.fillText('图表功能暂不可用', width/2, height/2 + 10);
}
};
// Mock chart types
Chart.defaults = {};
Chart.controllers = {};
}
}, 3000);
</script>
<script src="app.js"></script>
</body>
</html>

Loading…
Cancel
Save