使用页面上的多个图表切换Google图表类型

Question

我的页面上有10个Google图表。 我有一个用于切换图表类型的按钮，但是按目前的书写方式，它一次只能更改一个图表。 如果我为每个不同的图表构建该代码，那么我将重复大量的代码。

我想做的是编写一个更通用的函数，该函数将更改任何单个div的图表类型，而不是当前的div。

这是当前实现的所有代码的小提琴 。

var redrawCombo = function(){
  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'},
  'height': 250,
  animation: {
    duration: 750,
    easing: 'out',
  },
 }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
// Click Handlers
$('#combo-chart').click(function(e){
  redrawCombo();
  return false;
});
$('#bar-chart').click(function(e){
  drawChart1();
  return false;
});

Answer 1

您可以编写单个事件处理程序，该事件处理程序附加到与选择器匹配的所有元素上（也许图表div的类对此有好处吗？），然后使用事件属性来检索单击的容器：

$('.myCharts').click(function (e) {
    // e.target is the clicked on element
    // container id is e.target.id
});