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獲取折線圖示例，這是它生成的代碼：

<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>

為了更改圖表的大小，您必須調整兩個內部div，SVG本身的大小以及該圖表中每個單個元素的X / Y坐標。 您可以使用Javascript完成此操作，但是再次調用draw()會容易得多。