ring520/strategy_backtest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新建回测系统，并提交

Browse Source
This commit is contained in:
lintaogood
2026-01-17 21:37:42 +08:00
commit fe50ea935a
68 changed files with 108208 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

447
static/js/advanced.js Normal file
View File

@@ -0,0 +1,447 @@
// 高级功能：多策略对比、统计分析、参数热力图
// ===== 多策略对比功能 =====
async function initComparison() {
// 加载策略列表到两个下拉框
const response = await fetch('/api/equity/list');
const result = await response.json();
if (result.success) {
const select1 = document.getElementById('compare-strategy1');
const select2 = document.getElementById('compare-strategy2');
select1.innerHTML = '<option value="">请选择...</option>';
select2.innerHTML = '<option value="">请选择...</option>';
result.files.forEach(file => {
const option1 = document.createElement('option');
const option2 = document.createElement('option');
option1.value = file.filename;
option2.value = file.filename;
option1.textContent = file.strategy;
option2.textContent = file.strategy;
select1.appendChild(option1);
select2.appendChild(option2);
});
}
document.getElementById('compare-btn').addEventListener('click', compareStrategies);
}
async function compareStrategies() {
const file1 = document.getElementById('compare-strategy1').value;
const file2 = document.getElementById('compare-strategy2').value;
if (!file1 || !file2) {
alert('请选择两个策略进行对比');
return;
}
// 加载两个策略的数据
const [data1, data2] = await Promise.all([
fetch(`/api/equity/${file1}`).then(r => r.json()),
fetch(`/api/equity/${file2}`).then(r => r.json())
]);
if (data1.success && data2.success) {
// 显示统计数据
displayStrategyStats('strategy1-stats', data1.stats);
displayStrategyStats('strategy2-stats', data2.stats);
displayComparisonDiff('comparison-diff', data1.stats, data2.stats);
// 绘制对比图表
renderComparisonChart(data1.data, data2.data, file1, file2);
}
}
function displayStrategyStats(elementId, stats) {
const element = document.getElementById(elementId);
element.innerHTML = `
<p>初始资金: ¥${stats.initial_asset.toLocaleString()}</p>
<p>最终资金: ¥${stats.final_asset.toLocaleString()}</p>
<p>总收益率: <span class="${stats.total_return > 0 ? 'positive' : 'negative'}">${(stats.total_return * 100).toFixed(2)}%</span></p>
<p>最大回撤: <span class="negative">${(stats.max_drawdown * 100).toFixed(2)}%</span></p>
<p>回测天数: ${stats.num_days}天</p>
`;
}
function displayComparisonDiff(elementId, stats1, stats2) {
const element = document.getElementById(elementId);
const returnDiff = (stats1.total_return - stats2.total_return) * 100;
const ddDiff = (stats1.max_drawdown - stats2.max_drawdown) * 100;
element.innerHTML = `
<p>收益率差: <span class="${returnDiff > 0 ? 'positive' : 'negative'}">${returnDiff > 0 ? '+' : ''}${returnDiff.toFixed(2)}%</span></p>
<p>回撤差: <span class="${ddDiff > 0 ? 'negative' : 'positive'}">${ddDiff > 0 ? '+' : ''}${ddDiff.toFixed(2)}%</span></p>
<p>策略${returnDiff > 0 ? '1' : '2'}收益更高</p>
<p>策略${ddDiff < 0 ? '1' : '2'}回撤更小</p>
`;
}
function renderComparisonChart(data1, data2, label1, label2) {
const ctx = document.getElementById('comparison-chart').getContext('2d');
if (comparisonChart) {
comparisonChart.destroy();
}
// 采样数据
const step = Math.max(1, Math.floor(Math.max(data1.length, data2.length) / 200));
const labels = data1.filter((_, i) => i % step === 0).map(row => row.trade_date);
const assets1 = data1.filter((_, i) => i % step === 0).map(row => row.total_asset);
const assets2 = data2.filter((_, i) => i % step === 0).map(row => row.total_asset);
comparisonChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: label1.replace('_equity.csv', ''),
data: assets1,
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
borderWidth: 2,
fill: false,
tension: 0.4
},
{
label: label2.replace('_equity.csv', ''),
data: assets2,
borderColor: '#f093fb',
backgroundColor: 'rgba(240, 147, 251, 0.1)',
borderWidth: 2,
fill: false,
tension: 0.4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: '多策略资金曲线对比',
font: { size: 16 }
}
},
scales: {
y: {
title: {
display: true,
text: '总资产 (元)'
}
}
}
}
});
}
// ===== 统计分析功能 =====
async function initAnalytics() {
// 加载交易文件列表
const response = await fetch('/api/trades/list');
const result = await response.json();
if (result.success) {
const select = document.getElementById('analytics-file-select');
select.innerHTML = '<option value="">请选择...</option>';
result.files.forEach(file => {
const option = document.createElement('option');
option.value = file.filename;
option.textContent = `${file.time_display} - ${file.strategy_params}`;
select.appendChild(option);
});
}
document.getElementById('analytics-file-select').addEventListener('change', loadAnalyticsData);
document.getElementById('analytics-refresh-btn').addEventListener('click', initAnalytics);
}
async function loadAnalyticsData() {
const filename = document.getElementById('analytics-file-select').value;
if (!filename) return;
const response = await fetch(`/api/trades/${filename}`);
const result = await response.json();
if (result.success) {
renderProfitDistribution(result.data);
renderDrawdownAnalysis(result.data);
}
}
function renderProfitDistribution(data) {
const ctx = document.getElementById('profit-distribution-chart').getContext('2d');
if (profitDistChart) {
profitDistChart.destroy();
}
// 统计盈亏分布
const profits = data.map(row => row.profit_pct * 100);
const bins = [-50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50];
const counts = new Array(bins.length - 1).fill(0);
profits.forEach(p => {
for (let i = 0; i < bins.length - 1; i++) {
if (p >= bins[i] && p < bins[i + 1]) {
counts[i]++;
break;
}
}
});
profitDistChart = new Chart(ctx, {
type: 'bar',
data: {
labels: bins.slice(0, -1).map((b, i) => `${b}~${bins[i+1]}%`),
datasets: [{
label: '交易次数',
data: counts,
backgroundColor: counts.map((_, i) => bins[i] < 0 ? 'rgba(220, 53, 69, 0.7)' : 'rgba(40, 167, 69, 0.7)'),
borderColor: counts.map((_, i) => bins[i] < 0 ? '#dc3545' : '#28a745'),
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: {
display: true,
text: '收益率分布直方图'
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '交易笔数'
}
}
}
}
});
}
function renderDrawdownAnalysis(data) {
const ctx = document.getElementById('drawdown-chart').getContext('2d');
if (drawdownChart) {
drawdownChart.destroy();
}
// 计算累计盈亏和回撤
let cumProfit = 0;
let maxProfit = 0;
const cumProfits = [];
const drawdowns = [];
data.forEach(row => {
cumProfit += row.profit_amount;
cumProfits.push(cumProfit);
maxProfit = Math.max(maxProfit, cumProfit);
drawdowns.push(cumProfit - maxProfit);
});
drawdownChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.map((_, i) => i + 1),
datasets: [
{
label: '累计盈亏',
data: cumProfits,
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
borderWidth: 2,
fill: true,
yAxisID: 'y'
},
{
label: '回撤',
data: drawdowns,
borderColor: '#dc3545',
backgroundColor: 'rgba(220, 53, 69, 0.1)',
borderWidth: 2,
fill: true,
yAxisID: 'y'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'top' },
title: {
display: true,
text: '累计盈亏与回撤分析'
}
},
scales: {
y: {
title: {
display: true,
text: '金额 (元)'
}
}
}
}
});
}
// ===== 参数热力图功能 =====
async function initHeatmap() {
// 加载优化结果文件列表
const response = await fetch('/api/optimization/list');
const result = await response.json();
if (result.success) {
const select = document.getElementById('heatmap-file-select');
select.innerHTML = '<option value="">请选择...</option>';
result.files.forEach(file => {
const option = document.createElement('option');
option.value = file.filename;
option.textContent = `${file.time_display} (${file.num_results}组参数)`;
select.appendChild(option);
});
}
document.getElementById('heatmap-generate-btn').addEventListener('click', generateHeatmap);
}
async function generateHeatmap() {
const filename = document.getElementById('heatmap-file-select').value;
if (!filename) {
alert('请选择优化结果文件');
return;
}
const response = await fetch(`/api/optimization/${filename}`);
const result = await response.json();
if (result.success) {
const xParam = document.getElementById('heatmap-x-param').value;
const yParam = document.getElementById('heatmap-y-param').value;
const metric = document.getElementById('heatmap-metric').value;
renderHeatmap(result.data, xParam, yParam, metric);
}
}
function renderHeatmap(data, xParam, yParam, metric) {
// 获取唯一的X和Y值
const xValues = [...new Set(data.map(row => row[xParam]))].sort((a, b) => a - b);
const yValues = [...new Set(data.map(row => row[yParam]))].sort((a, b) => a - b);
// 创建热力图矩阵
const matrix = [];
for (let y of yValues) {
const row = [];
for (let x of xValues) {
const point = data.find(d => d[xParam] === x && d[yParam] === y);
row.push(point ? point[metric] : null);
}
matrix.push(row);
}
// 使用Chart.js的matrix插件或简单的热力图
const ctx = document.getElementById('heatmap-chart').getContext('2d');
if (heatmapChart) {
heatmapChart.destroy();
}
// 简化版：使用散点图模拟热力图
const points = [];
data.forEach(row => {
if (row[xParam] !== undefined && row[yParam] !== undefined && row[metric] !== null) {
points.push({
x: row[xParam],
y: row[yParam],
v: row[metric]
});
}
});
// 找出最大最小值用于颜色映射
const values = points.map(p => p.v);
const minVal = Math.min(...values);
const maxVal = Math.max(...values);
heatmapChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: metric,
data: points,
backgroundColor: points.map(p => {
const ratio = (p.v - minVal) / (maxVal - minVal);
const r = Math.floor(220 * (1 - ratio) + 40 * ratio);
const g = Math.floor(53 * (1 - ratio) + 167 * ratio);
const b = Math.floor(69 * (1 - ratio) + 69 * ratio);
return `rgba(${r}, ${g}, ${b}, 0.7)`;
}),
borderColor: '#fff',
borderWidth: 1,
pointRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
title: {
display: true,
text: `参数热力图 - ${metric}`,
font: { size: 16 }
},
tooltip: {
callbacks: {
label: function(context) {
return `${metric}: ${context.raw.v.toFixed(4)}`;
}
}
}
},
scales: {
x: {
title: {
display: true,
text: xParam
}
},
y: {
title: {
display: true,
text: yParam
}
}
}
}
});
}
// 初始化所有高级功能
document.addEventListener('DOMContentLoaded', function() {
// 延迟加载，等待主功能初始化完成
setTimeout(() => {
initComparison();
initAnalytics();
initHeatmap();
}, 500);
});