2011-01-17 6 views
2

다중 행 헤더가있는 DataTable을 만들려고합니다. 여기서 예시 할 것입니다 :Google 시각화 다중 행 헤더

|    2008   |   2009   | 
--------------------------------------------------------- 
| price  | qty.  | price | qty  | 
--------------------------------------------------------- 
|  93993  | 34434  |  34244 | 3434 | 
..... 

나는 그로부터 정렬하고 싶지 않기 때문에 년 헤더를 고칠 수 있습니다. Google 시각화에서이를 수행 할 수있는 방법이 있습니까?

업데이트

작동하지 않습니다 JS로 부착하고, 완료 정렬이 때 사라집니다.

$(".google-visualization-table-table").prepend("<tr class='google-visualization-table-tr-head'><td colspan='4'>something</tr>"); 

답변

1

은 내가 한 그래서 DataTables를 사용하여 googleVisualizations에서 할 수 없습니다 나타납니다.

0

테이블의 정렬 행 (행 = 0)에서 클릭 이벤트 후 다시 붙여 넣기 할 수 있습니까?

+0

시도하지 않았습니다. 아마 정렬 후에 사라질 것입니다. –

0

해당 옵션을 사용할 수있는 경우 정렬을 비활성화 할 수 있습니다. 정렬을 사용하지 않으려면 'sort': 'disable'draw() 메소드로 전달하십시오.

+1

나는 여분의 헤더를 갖기 위해 정렬을 비활성화하고 싶지 않았다. –

1

열 레이블에 html 표를 사용하고 allowHtml : true을 옵션으로 사용해보십시오.

다음은 샘플 작업입니다 (정확한 요구 사항은 아님). 빌드를위한 통찰력을 줄 수 있습니다.

<html> 
    <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 
     google.load('visualization', '1', {packages:['table']}); 
     google.setOnLoadCallback(drawTable); 
     function drawTable() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('number', '<table align="center" width="100%"><tr><td colspan="2">Year1</td></tr> <tr><td>price</td> <td>qty</td></tr></table>'); 
     data.addColumn('number', '<table align="center" width="100%"><tr><td colspan="2">Year2</td></tr> <tr><td>price</td> <td>qty</td></tr></table>'); 
     data.addRow([{v: 1, f: '<table align="center" width="100%"><tr><td>93993</td> <td>34434</td></tr></table>'}, 
        {v: 2, f: '<table align="center" width="100%"><tr><td>34244</td> <td>3434</td></tr></table>'} ]); 
     data.addRow([{v: 2, f: '<table align="center" width="100%"><tr><td>93995</td> <td>34435</td></tr></table>'}, 
        {v: 2, f: '<table align="center" width="100%"><tr><td>34245</td> <td>3435</td></tr></table>'} ]); 
     var table = new google.visualization.Table(document.getElementById('table_div')); 
     table.draw(data, {showRowNumber: true, allowHtml:true }); 
     } 
     </script> 
    </head> 

    <body> 
    <div id='table_div'></div> 
    </body> 
</html>