DouZero
/
Douzero_Resnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Douzero_Resnet/static/charts.html

165 lines
7.9 KiB
HTML
Raw Normal View History

charts
2021-12-27 10:10:41 +08:00
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
调整样式，抽取参数
2021-12-28 16:05:12 +08:00
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
charts
2021-12-27 10:10:41 +08:00
</head>
<body>
添加切换按钮
2021-12-27 18:00:04 +08:00
<select id='model_type'>
<option value ="lite_resnet">lite_resnet</option>
<option value ="lite_vanilla">lite_vanilla</option>
<option value ="legacy_vanilla">legacy_vanilla</option>
</select>
charts
2021-12-27 10:10:41 +08:00
<div id="container_2" style="width: 80%; height: 400px; margin: 0 auto"></div>
调整图表位置
2022-01-05 09:56:44 +08:00
<div id="container_1" style="width: 80%; height: 400px; margin: 0 auto"></div>
<div id="container_0" style="width: 80%; height: 400px; margin: 0 auto"></div>
charts
2021-12-27 10:10:41 +08:00
<script>
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
position_map = {
'landlord': '地主',
'landlord_down': '地主下家',
'landlord_front': '地主对家',
'landlord_up': '地主上家',
}
添加切换按钮
2021-12-27 18:00:04 +08:00
function load_charts(model_type){
charts
2021-12-27 10:10:41 +08:00
$.ajax({
添加切换按钮
2021-12-27 18:00:04 +08:00
url: "metrics?type=" + model_type,
charts
2021-12-27 10:10:41 +08:00
success: function (result) {
result = result.result
var i = 0
positions = ['landlord', 'landlord_down', 'landlord_front', 'landlord_up']
for (var rank in result) {
if (!result.hasOwnProperty(rank)) {
continue
}
var json = {
title: {
优化SQL及UI
2021-12-27 11:22:49 +08:00
text: 'Baseline: ' + rank
charts
2021-12-27 10:10:41 +08:00
},
subtitle: {
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
text: 'WP: ' + result[rank]['baseline'].landlord_wp + '\t/\t' + result[rank]['baseline'].farmer_wp + '&nbsp;&nbsp;&nbsp;&nbsp;' +
'ADP: ' + result[rank]['baseline'].landlord_adp + '\t/\t' + result[rank]['baseline'].farmer_adp + '<br/>' +
优化SQL及UI
2021-12-27 11:22:49 +08:00
result[rank]['baseline'].landlord_path + '\t/\t' +
result[rank]['baseline'].landlord_down_path + '\t/\t' +
result[rank]['baseline'].landlord_front_path + '\t/\t' +
result[rank]['baseline'].landlord_up_path
charts
2021-12-27 10:10:41 +08:00
},
调整样式，抽取参数
2021-12-28 16:05:12 +08:00
colors: ['#e02f1b', '#a82314', '#1be02f', '#14a823', '#1bcce0', '#1499a8', '#2f1be0', '#2314a8'],
调整图表，添加字段
2021-12-29 16:48:32 +08:00
symbols: ['circle', 'circle', 'triangle-down', 'triangle-down', 'square', 'square', 'triangle', 'triangle'],
调整样式，抽取参数
2021-12-28 16:05:12 +08:00
yAxis: [
{
title: {text: 'Win Rate (%)'},
plotLines: [
{
label: { text: 'landlord_wp'},
color: '#e0887e',
width: 2,
zIndex: 5,
value: parseFloat(result[rank]['baseline'].landlord_wp) * 100,
dashStyle: 'shortdash'
},
{
label: { text: 'farmer_wp'},
color: '#7ed6e0',
width: 2,
zIndex: 5,
value: parseFloat(result[rank]['baseline'].farmer_wp) * 100,
dashStyle: 'shortdash'
}
]
},
{
title: { text: 'ADP'},
opposite: true,
plotLines: [
{
label: { text: 'landlord_adp'},
color: '#e0887e',
width: 2,
value: parseFloat(result[rank]['baseline'].landlord_adp),
zIndex: 5,
dashStyle: 'longdashdot'
},
{
label: { text: 'farmer_adp'},
color: '#7ed6e0',
width: 2,
value: parseFloat(result[rank]['baseline'].farmer_adp),
zIndex: 5,
dashStyle: 'longdashdot'
}
]
}
]
charts
2021-12-27 10:10:41 +08:00
}
categories = new Set()
$.map(positions, function (position) {
$.map(result[rank][position], function (_, frame){
微调
2021-12-30 14:33:54 +08:00
categories.add(parseInt(frame))
charts
2021-12-27 10:10:41 +08:00
})
})
chart fix
2022-01-01 09:27:18 +08:00
categories = Array.from(categories).sort(function (a,b) {
return a > b ? 1 : (a === b ? 0 : -1)
})
charts
2021-12-27 10:10:41 +08:00
json.series = $.map(positions, function (position) {
if (!result[rank].hasOwnProperty(position)) {
return null;
}
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
return [{
name: position_map[position] + " WP",
charts
2021-12-27 10:10:41 +08:00
type: 'spline',
connectNulls: true,
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
yAxis: 0,
tooltip: {
微调
2021-12-27 16:58:46 +08:00
pointFormat: position_map[position] + " WP: {point.y:.2f}%<br>"
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
},
charts
2021-12-27 10:10:41 +08:00
data: $.map(categories, function (frame) {
if (result[rank][position].hasOwnProperty(frame)) {
chart fix
2022-01-01 09:27:18 +08:00
return [[frame, (parseFloat(result[rank][position][frame].wp) * 100)]]
charts
2021-12-27 10:10:41 +08:00
} else {
chart fix
2022-01-01 09:27:18 +08:00
return [[frame, null]]
charts
2021-12-27 10:10:41 +08:00
}
})
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
}, {
name: position_map[position] + " ADP",
type: 'spline',
connectNulls: true,
yAxis: 1,
visible: false,
tooltip: {
微调
2021-12-27 16:58:46 +08:00
pointFormat: position_map[position] + " ADP: {point.y:.2f}<br>"
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
},
data: $.map(categories, function (frame) {
if (result[rank][position].hasOwnProperty(frame)) {
chart fix
2022-01-01 09:27:18 +08:00
return [[frame, parseFloat(result[rank][position][frame].adp)]]
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
} else {
chart fix
2022-01-01 09:27:18 +08:00
return [[frame, null]]
添加y轴，调整样式
2021-12-27 16:56:45 +08:00
}
})
}]
charts
2021-12-27 10:10:41 +08:00
})
json.legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
$('#container_' + i).highcharts(json);
调整样式，抽取参数
2021-12-28 16:05:12 +08:00
debugger
charts
2021-12-27 10:10:41 +08:00
i++
}
}
});
添加切换按钮
2021-12-27 18:00:04 +08:00
}
$(document).ready(function () {
load_charts("lite_resnet");
$("#model_type").on('change', function(){
load_charts($("#model_type").val())
})
charts
2021-12-27 10:10:41 +08:00
});
</script>
</body>
</html>