Google 차트 : 타임 라인 : 스 케일 바 위치가있는 동적 높이

Question

보기 및 응답 주셔서 감사합니다. Google Charts (TimeLine)를 사용하여 데이터베이스의 정보를 표시하고 있습니다. 그러나 Google 차트 참조는 차트의 고정 높이만 제공합니다. 데이터에서 가져온 행 수에 따라 차트 높이를 변경하고 싶습니다.

var graph = $('#chart_timeLine').children()[0].children[0].children[1]; 
    $(graph).css('height',graph.scrollHeight); 
    $(graph).css('overflow-y','auto'); 

지금 차트가 수직 스크롤이없는 내가 만족 : 그래서 내가 코드를했다. 그러나 타임 라인 차트의 스케일을 보여주는 스케일 바가 없습니다. (차트 하단에 나타나지 않고 실제로 차트 아래에 숨어 있습니다.)

그렇다면 스케일 바의 위치를 ​​절대로 변경하고 차트의 맨 아래로 설정하십시오. 그렇다면 높이가 200px이고 크기가 200px의 맨 아래에 있기 때문에보기 흉한데 내 차트와 눈금 사이에 거대한 공백이 남습니다.

수정 사항이 있습니까? 감사합니다. ,

// set a padding value to cover the height of title and axis values 
var paddingHeight = 40; 
// set the height to be covered by the rows 
var rowHeight = data.getNumberOfRows() * 15; 
// set the total chart height 
var chartHeight = rowHeight + paddingHeight; 

하고 타임 라인의 옵션으로 높이 설정 : 대신 차트의 내부 동작 장난의

Answer 1

는 DataTable에 데이터의 행의 수에 기초하여 높이를 설정

을

height: chartHeight 

Answer 2

답변을 시도했지만 나에게 적합하지 않았습니다. getNumberOfRows에

// Calculate height 
    var rowHeight = 41; 
    var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50; 

    var options = { 
     height: chartHeight 
    } 

의 + 1() X 축 텍스트입니다 : 내가 나를 위해 일을하는 데있어 방법이이었다.

Answer 3

$.ajax({ 
    ... 
    success: function(jsonData){ 
    ... 
    var options = { 
     height: (jsonData.length * 40) + 80, 
     timeline: { colorByRowLabel: true } 
    }; 

    chart.draw(dataTable, options); 
} 
}); 

Answer 4

지금까지 내가 그 말할 수 : 각 그룹에 대한 각 막대

10px 패딩

• 30 픽셀 높이입니다.
• 시리즈는 60px입니다.

그래서 9 바 그룹 = (30 * 9) + 10 = 280px 차트 높이 = 280px + 60 픽셀

당신이 당신의 날짜 범위가 어떤와 중복 여부를 결정해야합니다 행을 그룹화하는 경우 그 그룹의 다른 사람들.

구글에 의해이 작업을 수행 : 내가 볼

Getting the Group items IN START DATE ORDER 
Creating an empty array of Group Display Rows 

For each Group Item: 
    For each Display Row 
     If Item fits in Row... 
     Add it to existing Display Row 
    Next 

    If No existing Display row found 
     Add New Display Row 
Next