Multi Model Comparsionecharts value配置项内容和展示
配置项如下
cutoffs = ['0.00',
'0.01',
'0.02',
'0.03',
'0.04',
'0.05',
'0.06',
'0.07',
'0.08',
'0.09',
'0.10',
'0.11',
'0.12',
'0.13',
'0.14',
'0.15',
'0.16',
'0.17',
'0.18',
'0.19',
'0.20',
'0.21',
'0.22',
'0.23',
'0.24',
'0.25',
'0.26',
'0.27',
'0.28',
'0.29',
'0.30',
'0.31',
'0.32',
'0.33',
'0.34',
'0.35',
'0.36',
'0.37',
'0.38',
'0.39',
'0.40',
'0.41',
'0.42',
'0.43',
'0.44',
'0.45',
'0.46',
'0.47',
'0.48',
'0.49',
'0.50',
'0.51',
'0.52',
'0.53',
'0.54',
'0.55',
'0.56',
'0.57',
'0.58',
'0.59',
'0.60',
'0.61',
'0.62',
'0.63',
'0.64',
'0.65',
'0.66',
'0.67',
'0.68',
'0.69',
'0.70',
'0.71',
'0.72',
'0.73',
'0.74',
'0.75',
'0.76',
'0.77',
'0.78',
'0.79',
'0.80',
'0.81',
'0.82',
'0.83',
'0.84',
'0.85',
'0.86',
'0.87',
'0.88',
'0.89',
'0.90',
'0.91',
'0.92',
'0.93',
'0.94',
'0.95',
'0.96',
'0.97',
'0.98',
'0.99',
'1.00'
];
ft = [
[1.0, 1.0],
[0.98, 1.0],
[0.95, 1.0],
[0.89, 1.0],
[0.84, 0.99],
[0.78, 0.99],
[0.74, 0.98],
[0.7, 0.96],
[0.67, 0.95],
[0.64, 0.94],
[0.61, 0.93],
[0.59, 0.92],
[0.56, 0.92],
[0.53, 0.91],
[0.51, 0.91],
[0.5, 0.9],
[0.47, 0.89],
[0.44, 0.88],
[0.42, 0.87],
[0.41, 0.86],
[0.39, 0.86],
[0.37, 0.85],
[0.36, 0.83],
[0.35, 0.82],
[0.33, 0.8],
[0.31, 0.78],
[0.3, 0.78],
[0.29, 0.76],
[0.28, 0.75],
[0.26, 0.73],
[0.25, 0.73],
[0.24, 0.7],
[0.22, 0.69],
[0.21, 0.67],
[0.2, 0.66],
[0.19, 0.65],
[0.18, 0.65],
[0.18, 0.64],
[0.17, 0.63],
[0.16, 0.6],
[0.14, 0.58],
[0.14, 0.58],
[0.14, 0.57],
[0.13, 0.55],
[0.13, 0.55],
[0.12, 0.54],
[0.11, 0.52],
[0.1, 0.5],
[0.1, 0.49],
[0.09, 0.48],
[0.09, 0.47],
[0.09, 0.46],
[0.08, 0.45],
[0.08, 0.44],
[0.07, 0.42],
[0.07, 0.39],
[0.06, 0.38],
[0.05, 0.37],
[0.05, 0.34],
[0.05, 0.32],
[0.04, 0.31],
[0.04, 0.31],
[0.04, 0.31],
[0.04, 0.28],
[0.04, 0.27],
[0.04, 0.23],
[0.03, 0.22],
[0.03, 0.2],
[0.03, 0.19],
[0.03, 0.18],
[0.02, 0.16],
[0.02, 0.14],
[0.02, 0.13],
[0.02, 0.12],
[0.02, 0.1],
[0.02, 0.08],
[0.01, 0.07],
[0.01, 0.05],
[0.01, 0.05],
[0.01, 0.04],
[0.01, 0.04],
[0.0, 0.02],
[0.0, 0.01],
[0.0, 0.01],
[0.0, 0.01],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0]
];
ft_c5 = [
[1.0, 1.0],
[1.0, 1.0],
[1.0, 1.0],
[1.0, 1.0],
[1.0, 1.0],
[1.0, 1.0],
[1.0, 1.0],
[0.98, 1.0],
[0.97, 1.0],
[0.49, 0.89],
[0.48, 0.89],
[0.48, 0.89],
[0.46, 0.89],
[0.46, 0.89],
[0.46, 0.89],
[0.46, 0.89],
[0.28, 0.8],
[0.22, 0.78],
[0.22, 0.78],
[0.22, 0.78],
[0.21, 0.78],
[0.12, 0.72],
[0.12, 0.72],
[0.11, 0.71],
[0.11, 0.71],
[0.1, 0.71],
[0.1, 0.71],
[0.1, 0.71],
[0.1, 0.71],
[0.1, 0.71],
[0.09, 0.7],
[0.09, 0.7],
[0.09, 0.7],
[0.09, 0.7],
[0.08, 0.69],
[0.08, 0.69],
[0.08, 0.69],
[0.08, 0.69],
[0.07, 0.68],
[0.07, 0.68],
[0.07, 0.68],
[0.07, 0.68],
[0.07, 0.68],
[0.07, 0.68],
[0.07, 0.68],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.06, 0.67],
[0.05, 0.62],
[0.05, 0.62],
[0.05, 0.62],
[0.05, 0.62],
[0.05, 0.62],
[0.05, 0.6],
[0.05, 0.6],
[0.05, 0.6],
[0.05, 0.6],
[0.04, 0.58],
[0.04, 0.58],
[0.04, 0.58],
[0.03, 0.53],
[0.03, 0.53],
[0.03, 0.53],
[0.03, 0.5],
[0.03, 0.5],
[0.03, 0.49],
[0.02, 0.36],
[0.02, 0.36],
[0.02, 0.36],
[0.02, 0.36],
[0.02, 0.33],
[0.02, 0.33],
[0.02, 0.33],
[0.02, 0.28],
[0.0, 0.02],
[0.0, 0.02],
[0.0, 0.02],
[0.0, 0.02],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0],
[0.0, 0.0]
];
// 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];
option = {
visualMap: {
type: 'continuous',
min: 0,
max: 1,
precision: 2,
text: ['1.0', 'cutoff: 0.0'],
realtime: false,
calculable: false,
// color: ['orangered','yellow','lightskyblue'],
orient: 'horizontal',
show: true,
itemHeight: '900%',
left: '10%',
hoverLink: true,
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
dimension: 2,
// seriesIndex:1,
formatter: function(value) {
console.log('here');
index = Math.round(value * 100)
cutoff = Math.round(value * 100) / 100;
fpr = ft[index][0];
tpr = ft[index][1];
ft_new = ft.slice();
fpr_c5 = ft_c5[index][0];
tpr_c5 = ft_c5[index][1];
ft_new_c5 = ft_c5.slice();
var cut = {
'value': [fpr, tpr],
'symbolSize': 10
};
var cut_c5 = {
'value': [fpr_c5, tpr_c5],
'symbolSize': 10
};
ft_new[index] = cut;
ft_new_c5[index] = cut_c5;
myChart.setOption({
title: {
subtext: ' cutoff: ' + cutoff + "\n" +
" Log " + " " + "C5" + "\n" +
" fpr " + " " + ft[index][0] + " " + ft_c5[index][0] +"\n" +
" tpr " + " " + ft[index][1] + " " + ft_c5[index][1],
subtextStyle: {
fontSize: 16
}
},
series: [{
name: "Log",
data: ft_new,
},{
name: "C5",
data: ft_new_c5,
}]
});
// console.log('selectDataRange end');
return "Cutoff" + ":" + cutoff;
},
},
backgroundColor: '#394056',
title: {
// text: "Cutoff:" + cutoff + "<br/>" + "fpr: " + 0,
// textAlign: 'center',
// left: '63%',
// top: '55%',
// textStyle: {
// fontSize: 10,
// color: 'rgba(255, 255, 255, 0.7)'
// }
text: 'Multi Binary Classification Model ROC Comparsion',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3',
},
left: '63%',
top: '55%'
},
tooltip: {
trigger: 'axis',
// show: true,
// alwaysShowContent: true,
// text: 'here',
triggerOn: 'none',
// position: ['63%', '55%'],
formatter: function(params) {
index = params[0].dataIndex;
console.log("tooltip %d", index);
return "Cutoff: " + ":" + datas[index][0] +
"<br/>" + "fpr " + ":" + ft[index][0] +
"<br/>" + "tpr" + ":" + ft[index][1];
// return "Cutoff " + ":" + datas[index][0] +
// "<br/>" + "fpr " + ":" + ft[index][0] +
// "<br/>" + "tpr" + ":" + ft[index][1] +
// "<br/>" + "Recall " + ":" + datas[index][5] +
// "<br/>" + "Accuracy " + ":" + datas[index][6];
},
axisPointer: {
lineStyle: {
color: '#57617B'
}
},
},
legend: {
icon: 'rect',
itemWidth: 20,
itemHeight: 10,
itemGap: 13,
data: ['Log', 'C5'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#F1F1F3'
},
},
grid: {
// top: 80,
// bottom: 100,
left: '3%',
right: '4%',
bottom: '10%',
// containLabel: true
},
xAxis: [{
type: 'value',
name: 'FPR',
nameTextStyle: {
fontSize: 14,
color: '#F1F1F3'
},
show: true,
min: 0,
max: 1,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#F1F1F3'
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
},
}],
yAxis: [{
type: 'value',
name: 'TPR',
nameTextStyle: {
fontSize: 14,
color: '#F1F1F3'
},
min: 0,
max: 1,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#F1F1F3'
}
},
splitLine: {
lineStyle: {
color: '#57617B'
}
}
}],
series: [{
name: 'Log',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 0.1,
lineStyle: {
normal: {
width: 1
}
},
itemStyle: {
normal: {
color: 'rgb(137,189,27)',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: ft,
// show:false
},{
name: 'C5',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 0.1,
lineStyle: {
normal: {
width: 1
}
},
itemStyle: {
normal: {
color: 'rgb(0,136,212)',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: ft_c5,
// show:false
}
// {
// name: 'cutoff',
// type: 'line',
// smooth: false,
// lineStyle: {
// normal: {
// width: 1
// }
// },
// itemStyle: {
// normal: {
// color: 'rgb(137,189,27)',
// borderColor: 'rgba(137,189,2,0.27)',
// borderWidth: 12
// }
// },
// data: cutoffs,
// // show:false
// },
],
};
// myChart.on("click", function(params) {
// console.log(params);
// var opt = myChart.getOption();
// opt.tooltip[0].triggerOn = 'click';
// myChart.setOption(opt);
// });
myChart.on('datarangeselected', function(params) {
// console.log('datarangeselected');
console.log(params);
// console.log(params.selected);
// console.log('datarangeselected end');
});
// myChart.on("mousemove", function(params) {
// // $("#test .Rmodule").remove();
// // console.log('mousemove');
// // console.log(params.dataIndex);
// // var dataIndex = params.dataIndex;
// // var maxpoint = testData[dataIndex][1];
// // var minpoint = testData[dataIndex][2];
// // var startPoint = [dataIndex, maxpoint];
// // var endPoint = [dataIndex, minpoint];
// var opt = myChart.getOption();
// // var html = '<div class="Rmodule">tn:' + tn[params.dataIndex] + '<br/>minRadius:' + 1 + '</div>';
// // $("#test").append(html);
// // $("#test .Rmodule").css({
// // top: params.event.offsetY + 10,
// // left: params.event.offsetX + 10
// // });
// });
// myChart.on("mouseout", function(params) {
// var opt = myChart.getOption();
// myChart.setOption(opt);
// // $("#test .Rmodule").remove();
// });
截图如下
