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 Visualization会在您拥有的目标<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>

为了更改图表的大小，您必须调整两个内部div，SVG本身的大小以及该图表中每个元素的X / Y坐标。您可以使用Javascript执行此操作，但再次致电draw()会更容易。

Google Chart API JavaScript使用函数更改最大hAxis值

1 个答案: