Сверните в диаграммах Google

Question

Я пытаюсь выполнить сверление или развертку в круговой диаграмме. У меня на самом деле есть рабочая круглая круговая диаграмма, однако, когда я изменил значения коллекции, она не сработала. Мне интересно, что пошло не так, как я полностью выполнил рабочий код и просто заменил его значения. Диаграмма просто не отображается и имеет ошибку: Uncaught Error: Unknown header type: 17format+en,default+en,ui+en,controls+en,corechart+en.I.js:191. Я не уверен, связана ли эта ошибка с проблемой.

Javascript:

 google.load('visualization', '1', {packages: ['corechart', 'controls']}); 
     google.setOnLoadCallback(drawChart1); 

     var index = 0; 
     function drawChart1() { 
      <% 
       int aku = 0, cdu = 0, ls = 0, ptr = 0, rad = 0, oper = 0; 
       int aku1 = 0, aku2 = 0, aku3 = 0, aku4 = 0, aku5 = 0; 
       int cdu1 = 0, cdu2 = 0, cdu3 = 0, cdu4 = 0, cdu5 = 0, cdu6 = 0; 
       int ls1 = 0, ls2 = 0, ls3 = 0, ls4 = 0, ls5 = 0, ls6 = 0, ls7 = 0, ls8 = 0, ls9 = 0, ls10 = 0; 
       int ptr1 = 0, ptr2 = 0, ptr3 = 0, ptr4 = 0; 
       int rad1 = 0, rad2 = 0, rad3 = 0; 
       int oper1 = 0; 
      %> //Dummy values 

      //Main 
      var main = [ 
       ['Artificial Kidney Unit', <%=aku%>], 
       ['Cardiac Diagnostic Unit', <%=cdu%>], 
       ['Laboratory Services', <%=ls%>], 
       ['Physical Therapy and Rehabilitation', <%=ptr%>], 
       ['Radiology', <%=rad%>], 
       ['Operations', <%=oper%>] 
      ]; 

      //Aku 
      var akuu = [ 
       ['Hemodialysis', <%=aku1%>], 
       ['Peritoneal Dialysis', <%=aku2%>], 
       ['Continuous Renal Replacement Therapy', <%=aku3%>], 
       ['Sustained Low Efficient Dialysis', <%=aku4%>], 
       ['Private Dialysis Suite', <%=aku5%>] 
      ]; 

      //Cdu 
      var cduu = [ 
       ['Electrocardiography', <%=cdu1%>], 
       ['Ambulatory Electrocardiography', <%=cdu2%>], 
       ['Exercise Stress Test', <%=cdu3%>], 
       ['2D Echo', <%=cdu4%>], 
       ['Lower Extremity Arterial & Venous Color Duplex Scan', <%=cdu5%>], 
       ['Carotid Artery Duplex Scan', <%=cdu6%>] 
      ]; 

      //Ls 
      var lss = [ 
       ['Hematology', <%=ls1%>], 
       ['Blood Chemistry', <%=ls2%>], 
       ['Immunology and Serology', <%=ls3%>], 
       ['Clinical Microscopy', <%=ls4%>], 
       ['Microbiology', <%=ls5%>], 
       ['Blood Bank and Transfusion Services', <%=ls6%>], 
       ['Drug Testing', <%=ls7%>], 
       ['Parasitology', <%=ls8%>], 
       ['Surgical Pathology', <%=ls9%>], 
       ['Cytopathology', <%=ls10%>] 
      ]; 

      //Ptr 
      var ptrr = [ 
       ['Physical Therapy', <%=ptr1%>], 
       ['Occupational Therapy', <%=ptr2%>], 
       ['Ultrasound Diagnostic Therapy', <%=ptr3%>], 
       ['Orthotics and Prosthetic Evaluation', <%=ptr4%>] 
      ]; 

      //rad 
      var radd = [ 
       ['X-ray', <%=rad1%>], 
       ['Ultrasound', <%=rad2%>], 
       ['CT Scan', <%=rad3%>] 
      ]; 

      //oper 
      var operr = [ 
       ['Surgery', <%=oper1%>] 
      ]; 

      var collection = []; 
      collection[0] = google.visualization.arrayToDataTable(main); 
      collection[1] = google.visualization.arrayToDataTable(akuu); 
      collection[2] = google.visualization.arrayToDataTable(cduu); 
      collection[3] = google.visualization.arrayToDataTable(lss); 
      collection[4] = google.visualization.arrayToDataTable(ptrr); 
      collection[5] = google.visualization.arrayToDataTable(radd); 
      collection[6] = google.visualization.arrayToDataTable(operr); 

      var options1 = { 
       title: 'Departments', 
       animation: {'duration': 500, 
        'easing': 'in'}, 
       action: function() { 
        button.onclick = function() { 
         recreateDashboard(0); 
        }; 
       } 
      }; 

      var chart1 = new google.visualization.PieChart(document.getElementById('chart1')); 

      google.visualization.events.addListener(chart1, 'select', drillIn); 
      google.visualization.events.addListener(chart1, 'click', drillOut); 

      chart1.draw(collection[0], options1); 

      function drillIn() { 
       var sel = chart1.getSelection(); 
       var row = chart1.getSelection()[0].row; 
       options1['title'] = collection[index].getValue(sel[0].row, 0); 

       if(index === 0) { 
        if(row === 0) { 
         index = 1; 
        } 
        if(row === 1) { 
         index = 2; 
        } 
        if(row === 2) { 
         index = 3; 
        } 
        if(row === 3) { 
         index = 4; 
        } 
        if(row === 4) { 
         index = 5; 
        } 
        if(row === 5) { 
         index = 6; 
        } 
       } 
       else if(index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 6) { 
        options1['title'] = '# of services rendered in <%=year%>'; 
        index = 0; 
       } 

       chart1.draw(collection[index], options1); 


      } 

      function drillOut(e) { 
       if(e.targetID === "title") { 
        if(index !== 0) 
         index--; 
        else if(index === 4 || index === 6 || index === 8) 
         index -= 2; 
        chart1.draw(collection[index], options1); 
       } 
      } 

Html:

  <div id="chart1"> 

      </div> 

Answer 1

Я выяснил ошибку. Перед внесением значений все они нуждаются в заголовке.

Revised код:

 //Main 
     var main = [ 
      ['Department', 'Value'], 
      ['Cardiac Diagnostic Unit', <%=cdu%>], 
      ['Laboratory Services', <%=ls%>], 
      ['Physical Therapy and Rehabilitation', <%=ptr%>], 
      ['Radiology', <%=rad%>], 
      ['Operations', <%=oper%>] 
     ]; 

     //Aku 
     var akuu = [ 
      ['Service', 'Value'], 
      ['Hemodialysis', <%=aku1%>], 
      ['Peritoneal Dialysis', <%=aku2%>], 
      ['Continuous Renal Replacement Therapy', <%=aku3%>], 
      ['Sustained Low Efficient Dialysis', <%=aku4%>], 
      ['Private Dialysis Suite', <%=aku5%>] 
     ]; 

     //Cdu 
     var cduu = [ 
      ['Service', 'Value'], 
      ['Electrocardiography', <%=cdu1%>], 
      ['Ambulatory Electrocardiography', <%=cdu2%>], 
      ['Exercise Stress Test', <%=cdu3%>], 
      ['2D Echo', <%=cdu4%>], 
      ['Lower Extremity Arterial & Venous Color Duplex Scan', <%=cdu5%>], 
      ['Carotid Artery Duplex Scan', <%=cdu6%>] 
     ]; 

     //Ls 
     var lss = [ 
      ['Service', 'Value'], 
      ['Hematology', <%=ls1%>], 
      ['Blood Chemistry', <%=ls2%>], 
      ['Immunology and Serology', <%=ls3%>], 
      ['Clinical Microscopy', <%=ls4%>], 
      ['Microbiology', <%=ls5%>], 
      ['Blood Bank and Transfusion Services', <%=ls6%>], 
      ['Drug Testing', <%=ls7%>], 
      ['Parasitology', <%=ls8%>], 
      ['Surgical Pathology', <%=ls9%>], 
      ['Cytopathology', <%=ls10%>] 
     ]; 

     //Ptr 
     var ptrr = [ 
      ['Service', 'Value'], 
      ['Physical Therapy', <%=ptr1%>], 
      ['Occupational Therapy', <%=ptr2%>], 
      ['Ultrasound Diagnostic Therapy', <%=ptr3%>], 
      ['Orthotics and Prosthetic Evaluation', <%=ptr4%>] 
     ]; 

     //rad 
     var radd = [ 
      ['Service', 'Value'], 
      ['X-ray', <%=rad1%>], 
      ['Ultrasound', <%=rad2%>], 
      ['CT Scan', <%=rad3%>] 
     ]; 

     //oper 
     var operr = [ 
      ['Service', 'Value'], 
      ['Surgery', <%=oper1%>] 
     ];