感觉好久没有更新博客了，最近一直忙着毕业论文，紧接着就开始搭建数据库，实在抽不出时间写。
正好趁着做数据库，写一写关于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'},]}]
}