感觉好久没有更新博客了，最近一直忙着毕业论文，紧接着就开始搭建数据库，实在抽不出时间写。
正好趁着做数据库，写一写关于Highchart里两个饼图之间的互动。
用到的数据比较大，我也懒得修饰了，涉及到两个pie图的div，分别是 pie_container 和 signature_container。
先说明一下画 signature_container 时为了和 pie_container 互动，定义了一个函数，画图的数据利用 ajax 读取:
function signature_pie(cancer_type){
var data_arr = [
{name: "gene", y: 0.4},
{name: "protein", y: 0.2},
{name: "lncRNA", y: 0.1},
{name: "miRNA", y: 0.1},
{name: "mutation", y: 0.1},
{name: "methylation", y: 0.1}
];
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: 'signature type statistics',
style:{
fontSize: "20px"
},
y: 10,
x:-5
},
tooltip: {
pointFormat: 'Cohort precentage: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
events: {
click: function(event){
var signature_type = event.point.name;
document.getElementById("choose_signature_type").innerHTML = "<b>" + signature_type + "</b>";
}
},
dataLabels: {
enabled: false,
color: "black",
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
names: 'signature stat',
data: data_arr
}]
};
if(cancer_type == "ALL"){
Highcharts.chart('signature_container', options);
} else {
$.ajax({
url: '../data/test.txt',
dataType: 'text',
type: 'GET',
async: false,
success: function(data) {
var lines = data.split('\n');
for(var index = 1; index < (lines.length - 1); index++){
var info = lines[index].split('\t');
if(info[0] == cancer_type){
for(var i = 1; i < (info.length-1); i++){
options.series[0].data[i-1].y = parseFloat(info[i]);
}
Highcharts.chart('signature_container', options);
break;
}
}
}
});
}
}
下面是 pie_container 的 options:
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: 'cancer type statistics',
style:{
fontSize: "20px"
},
y: 10,
x:-5
},
tooltip: {
pointFormat: 'Type is <b>{point.type}<b><br/>Cohort precentage: <b>{point.percentage:.1f}%</b>'
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
events: {
click: function(event){
var cancer_type = event.point.name;
document.getElementById("choose_cancer_type").innerHTML = "<b>" + cancer_type + "</b>";
//利用signature_pie()函数，根据对应数据重新画一个pie图
javascript:signature_pie(cancer_type);
var index = event.point.index;
options.series[0].data[index]['selected'] = 'true';
options.series[0].data[index]['sliced'] = 'true';
Highcharts.chart('pie_container', options);
options.series[0].data[index]['selected'] = '';
options.series[0].data[index]['sliced'] = '';
}
},
dataLabels: {
enabled: false,
color: "black",
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
names: 'cancer stat',
data: [
{name: 'ACC', y: 0.00602188825469969, type: 'A'},
{name: 'BLCA', y: 0.0293239775881028, type: 'A'},
{name: 'BRCA', y: 0.0532544378698225, type: 'B'},
{name: 'CESC', y: 0.011520134052469, type: 'B'},
{name: 'CHOL', y: 0.00314185474158245, type: 'B'},
{name: 'COADREAD', y: 0.0395873697439388, type: 'A'},
{name: 'COAD', y: 0.029585798816568, type: 'D'},
{name: 'DLBC', y: 0.00382258993559198, type: 'D'},
{name: 'ESCA', y: 0.0112059485783107, type: 'D'},
{name: 'GBMLGG', y: 0.0756663350264439, type: 'C'},
{name: 'GBM', y: 0.0327800178038435, type: 'C'},
{name: 'HNSC', y: 0.0432005026967587, type: 'A'},
{name: 'KICH', y: 0.00837827931088653, type: 'B'},
{name: 'KIPAN', y: 0.0774990836257004, type: 'D'},
{name: 'KIRC', y: 0.0473896423522019, type: 'C'},
{name: 'KIRP', y: 0.0251348379326596, type: 'A'},
{name: 'LAML', y: 0.0116772267895481, type: 'A'},
{name: 'LGG', y: 0.0444048803476986, type: 'C'},
{name: 'LIHC', y: 0.0315232759072106, type: 'B'},
{name: 'LUAD', y: 0.0424674032570561, type: 'C'},
{name: 'LUSC', y: 0.0116248625438551, type: 'C'},
{name: 'OV', y: 0.043671780907996, type: 'A'},
{name: 'PAAD', y: 0.0190082211865738, type: 'D'},
{name: 'PCPG', y: 0.0109441273498455, type: 'D'},
{name: 'PRAD', y: 0.0450332512960151, type: 'D'},
{name: 'READ', y: 0.0123055977378646, type: 'A'},
{name: 'SARC', y: 0.0142430748285071, type: 'C'},
{name: 'SKCM', y: 0.0388542703042363, type: 'B'},
{name: 'STAD', y: 0.0378069853903754, type: 'A'},
{name: 'STES', y: 0.047494370843588, type: 'D'},
{name: 'TGCT', y: 0.00942556422474734, type: 'C'},
{name: 'THCA', y: 0.0492747551971514, type: 'A'},
{name: 'THYM', y: 0.00774990836257004, type: 'B'},
{name: 'UCEC', y: 0.0151332670052888, type: 'D'},
{name: 'UCS', y: 0.00429386814682934, type: 'A'},
{name: 'UVM', y: 0.00555061004346232, type: 'C'},
]
}]
}