자동 크기 조정 아약스 차트 rickshaw.js와 zurb 기초

Question

차트 크기 조정에 문제가 있습니다. 나는 인력거와 zurb 기반을 사용하고,이 같은 패널 컨테이너 내에서 크기를 조정합니다 아약스 차트를 자동 크기 필요

<div class="panel> 
    <div id="chart"></div> 
</div> 

하면 소스의 예와 함께 작동 자동 크기 zurb없이 사용 비 아약스 차트 :

https://github.com/shutterstock/rickshaw/blob/master/examples/resize.html

Answer 1

나는 실제로 당신과 같은 상황에 있습니다.

따라서 소스 코드를 검색 한 결과 해결책을 찾았습니다.

크기를 설정하기 전에 속성을 호출해야합니다. 예를 들어

: 당신이 볼 수 있듯이

var ajaxGraph = new Rickshaw.Graph.Ajax({ … }); 

$(window).resize(function() { 
    ajaxGraph.graph.configure({ 
    width: $("#chart").width(), 
    height: $("#chart").width() * 0.5 
    }); 
    ajaxGraph.graph.render(); 
}); 

, 나는 그래픽 개체에 액세스하고 폭과 높이를 설정하는 속성 을 사용합니다.

감사합니다.

Answer 2

나는 이것을 해결하려고 많은 시간을 보냈지 만, 인력거 바 그래프를 정확하게 크기를 재조정 한 곳에서는 완벽한 해결책을 찾지 못했습니다. 인력거 예제 중 어느 것도 이것을 올바르게 수행하는 방법을 보여주지 못합니다. 여기에 제시된 해결책이 작동하지만 차트/그래프 요소의 너비를 설정하려면 단단한 숫자 값 (높이 : $ ("# chart"). width() * 0.5)이 포함됩니다. 이것은 크기가 조정되지만 포함 HTML 요소 내에서 항상 보이거나 왜곡됩니다.
올바른 크기 조정을 위해 차트/그래프 요소가 포함 된 차원 내에서 HTML 렌더링이 작동하도록합니다. 인력거 막대 그래프 (또는 기타 인력거 차트 요소)의 동적 크기를 조정하려면 다음을 수행하십시오.

<!--div tag id="barGraphContainer with nested div tag containing the id "bars" used to contain the rickshaw graph/chart element--> 
<div id="barGraphContainer"> 
<div id="bars"></div> 
</div> 

<!--script tag to contain the resize() JS function--> 
<script> 

var graph = new Rickshaw.Graph({ 
element: document.getElementById("bars"), 
renderer: 'bar', 
series: [{data: [{ x: 0, y: 10 }, { x: 1, y: 18 }]),color: 'green'}] 
}); 

//get the html element for the container 
var barElement = document.getElementById("barGraphContainer"); 
var resize = function() { 
graph.configure({ 
width: barElement.clientWidth, //html is "auto-magically" rendering size 
height: barElement.clientHeight //leverage this for precise re-size scalling 
}); 
graph.render(); 
} 
window.addEventListener('resize', resize); 
resize(); 
</script>