Question

我正在使用Google Visualization为犯罪数据创建一个信息中心。我有四个链接，按下它们时，应每周，每月，每季度和每年更新数据。现在我有一个图表显示每周数据，但是当我按下“quarter”链接时，我想更新同一div中的图形（这里是classdiv1）。我编写了我的图表，但我无法弄清楚如何更新它们并将它们映射到我的链接。任何想法将不胜感激。我在下面附上我的部分代码。感谢。

<div class="classdiv-1">
    <div class="classmenu1">
        <a href="#"><center>Weekly</center></a>
    </div>
    <br>
    <div class="classmenu2">
        <a href="#"><center>Monthly</center></a>
    </div>
    <br>
    <div class="classmenu3">
        <a href="#"><center>Quarter</center></a>
    </div>
    <br>
    <div class="classmenu4">
        <a href="#"><center>Annually</center></a>
    </div>
</div>

function drawChartW() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Crime', 'Incidence', 'Stock Loss'],
        ['1',  50, 34, 55],
        ['2',  117, 46, 21],
        ['3',  66,  54, 42],
        ['4',  67, 59, 52]
    ]);

    var options = {
      title: 'Thread Trends'
    };

    var chart = new google.visualization.LineChart(document.getElementById('classdiv1'));
    chart.draw(data, options);
}

其他3个图表属于同一类型，它们被命名为drawChartM（），drawChartQ（）和drawChartA（）。

Answer 1

您不必拥有四种不同的drawChart方法。考虑一下：

<div class="classdiv-1">
  <div class="classmenu1"><a href="#" onclick="drawChart('w');return false;"><center>Weekly</center></a></div>
  <br>
  <div class="classmenu2"><a href="#" onclick="drawChart('m');return false;"><center>Monthly</center></a></div>
  <br>
  <div class="classmenu3"><a href="#" onclick="drawChart('q');return false;"><center>Quarter</center></a></div>
  <br>
  <div class="classmenu4"><a href="#" onclick="drawChart('a');return false;"><center>Annually</center></a></div>
</div>

每个时期都有不同的数组（参见下面的小提琴中的测试数组）

function drawChart(period) {
  var data;  
  switch (period) {
     case 'm': 
        data=monthly; break;
     case 'q': 
        data=quarter; break;
     case 'a': 
        data=yearly; break;
     default :
        data=weekly; break;
  };      
  var dataSet = google.visualization.arrayToDataTable(data);
  var options = {};
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(dataSet, options);
}

每周

onload将被取消，default

google.setOnLoadCallback(drawChart);

工作小提琴 - ＆gt;的 http://jsfiddle.net/LtVV3/

当我按下链接按钮时，在同一个div上更新谷歌可视化

1 个答案: