Google Chart API 함수를 사용하여 JavaScript 최대 변경 hAxis 값

Question

차트가로드되면 drawChart 함수를 다시 호출하지 않고도 함수에서 수평 최대 값 (날짜 범위)을 변경할 수 있습니까? 예를 들어

:

function changeWindow(){ 
    chart.setOptions(hAxis.viewWindow.max = 2); 
} 

원본 코드 :

var chart; 
function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

Answer 1

차트를 그릴 때, Google 시각화는 당신이 <div> 대상의 세 가지 요소를 채 웁니다. Google Playground for Line Chart에서 샘플을 촬영, 이것은 생성하는 코드는 다음과 같습니다

<div style="position: relative; width: 500px; height: 400px;" dir="ltr"> 
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"> 
<svg width="500" height="400" style="overflow: hidden;"> 
<defs id="defs"> 
<clipPath id="_ABSTRACT_RENDERER_ID_0"> 
<rect x="96" y="77" width="309" height="247"> 
</clipPath> 
</defs> 
<rect x="0" y="0" width="500" height="400" stroke="none" stroke-width="0" fill="#ffffff"> 
<g> 
<rect x="417" y="77" width="71" height="50" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"> 
<g> 
<rect x="417" y="77" width="71" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"> 
<g> 
<text text-anchor="start" x="434" y="87.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Cats</text> 
</g> 
<rect x="417" y="77" width="12" height="12" stroke="none" stroke-width="0" fill="#3366cc"> 
</g> 
<g> 
<rect x="417" y="96" width="71" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"> 
<g> 
<text text-anchor="start" x="434" y="106.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Blanket 1</text> 
</g> 
<rect x="417" y="96" width="12" height="12" stroke="none" stroke-width="0" fill="#dc3912"> 
</g> 
<g> 
<rect x="417" y="115" width="71" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"> 
<g> 
<text text-anchor="start" x="434" y="125.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Blanket 2</text> 
</g> 
<rect x="417" y="115" width="12" height="12" stroke="none" stroke-width="0" fill="#ff9900"> 
</g> 
</g> 
<g> 
<rect x="96" y="77" width="309" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"> 
<g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"> 
<g> 
<rect x="96" y="323" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc"> 
<rect x="96" y="262" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc"> 
<rect x="96" y="200" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc"> 
<rect x="96" y="139" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc"> 
<rect x="96" y="77" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc"> 
</g> 
<g> 
<rect x="96" y="323" width="309" height="1" stroke="none" stroke-width="0" fill="#333333"> 
</g> 
<g> 
</g> 
<g> 
<g> 
</g> 
<g> 
</svg> 
</div> 
</div> 

, 당신의 SVG 자체의 크기를 두 내장 된 div를 조정해야하고, 할 차트의 크기를 변경하기 위해 차트 내의 모든 단일 요소의 X/Y 좌표 Javascript로이 작업을 수행 할 수 있지만 draw()으로 다시 전화하는 것이 훨씬 쉽습니다.