google.visualisation.DataTable() 병합 행

Question

나는 구글의 DataTable이 데이터를 가지고있다. 그래서 결과는 다음과 같습니다

이를 달성하기 DataTable의에서 방법 빌드가 아니면 누군가가 어떻게 테이블에 비교를 통해 일반적인 반복하는 필요없이이 작업을 수행하는 나에게 힌트를 줄 수 각 행.

여기에 jsfiddle 링크가 있습니다.

이 작업 조각을 다음을 참조 표준 옵션이없는

jsfiddle.net/Kwangsub_Ahn/ohh8397h/7/ 

HTML 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="table_div"></div> 

JAVASCRIPT 
google.load("visualization", "1.1", { 
    packages: ["table"] 
}); 
google.setOnLoadCallback(drawTable); 

function drawTable() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Date'); 
    data.addColumn('string', 'Project'); 
    data.addColumn('string', 'System'); 
    data.addColumn('number', 'No'); 
    data.addRows([ 
     ['7/31/2014', 'project1', 'system1', 5], 
     ['5/2/2014', 'project2', 'system2', 2], 
     ['5/2/2014', 'project1', 'system1', 5], 
     ['1/31/2014', 'project3', 'system4', 1] 
    ]); 

    var view = new google.visualization.DataView(data); 

    var id = document.getElementById('table_div'); 
    var table = new google.visualization.Table(id); 

    table.draw(view, { 
     allowHtml: true, 
     width: '100%', 
     height: '100%', 
     page: 'enable', 
     pageSize: 10 
    }); 
} 

Answer 1

,

하지만 수동으로 테이블 차트를 수정할 수 있으며, 'ready' 이벤트가 발생 한 번

, ...

google.charts.load('current', { 
 
    callback: drawTable, 
 
    packages: ['table'] 
 
}); 
 

 
function drawTable() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Date'); 
 
    data.addColumn('string', 'Project'); 
 
    data.addColumn('string', 'System'); 
 
    data.addColumn('number', 'No'); 
 
    data.addRows([ 
 
     ['7/31/2014', 'project1', 'system1', 5], 
 
     ['5/2/2014', 'project2', 'system2', 2], 
 
     ['5/2/2014', 'project1', 'system1', 5], 
 
     ['1/31/2014', 'project3', 'system4', 1] 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 

 
    var id = document.getElementById('table_div'); 
 
    var table = new google.visualization.Table(id); 
 

 
    google.visualization.events.addOneTimeListener(table, 'ready', function() { 
 
     var rowLabel = null; 
 
     var rowIndex; 
 
     var rowSpan; 
 
     var rows = id.getElementsByTagName('tr'); 
 
     Array.prototype.forEach.call(rows, function (row, index) { 
 
     if (rowLabel !== row.cells[0].innerHTML) { 
 
      rowLabel = row.cells[0].innerHTML; 
 
      rowIndex = index; 
 
      if (rowSpan > 1) { 
 
      rows[index - rowSpan].cells[0].rowSpan = rowSpan; 
 
      } 
 
      rowSpan = 1; 
 
     } else { 
 
      rowSpan++; 
 
      row.removeChild(row.cells[0]); 
 
     } 
 
     }); 
 
    }); 
 

 
    table.draw(view, { 
 
     allowHtml: true, 
 
     width: '100%', 
 
     height: '100%', 
 
     page: 'enable', 
 
     pageSize: 10 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table_div"></div>

참고

: 반복하는없이 더 쉬운 방법

Answer 2

이 코드를 시도 각 행이 있다고 생각하지 않습니다, 그것은 1oth 행까지 잘 작동이 다른 행은 페이지의 정렬에 합병되지 않는다 병합되지 않은 병합 데이터를 원래 데이터로 변경합니다. 내 실제 시나리오는 행을 동일한 값으로 병합하는 것입니다. 여러 행의 행일 수 있습니다. 당신은 당신이 지금까지이 일에 시도 것을 제공하는 경우

당신은 더 나은 도움을받을 것입니다 내 샘플 데이터