Highchart 饼图联动

感觉好久没有更新博客了，最近一直忙着毕业论文，紧接着就开始搭建数据库，实在抽不出时间写。

正好趁着做数据库，写一写关于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'},
    ]
  }]
}