如何将各AJAX调用的变量传入同一个drawChart函数以实现代码复用

看起来你现在是用两个独立的绘制函数来处理两次AJAX请求的图表，想要把代码复用起来其实很简单——核心就是把每个图表的差异化配置（比如容器ID、图表类型、标题，甚至后端请求参数）抽离出来，在AJAX回调时把数据和配置一起传给共用的drawChart函数就行。

下面给你几种实用的实现方式：

1. 基础版：给共用函数传递图表配置 #

如果两次AJAX请求的数据源是同一个（都是data.php），只是图表展示形式不同，你可以把每个图表的专属配置作为参数传入：

google.charts.load('current', { packages: ['corechart', 'bar'] }).then(function () { 
  // 第一个图表：请求数据后，传递数据+配置给共用函数
  $.ajax({ url: 'data.php', dataType: 'json' }).done(function(result) {
    drawChart(result, {
      containerId: 'chart1', // 图表要渲染到的DOM容器ID
      chartType: 'ColumnChart', // 图表类型
      title: '月度销售柱状图'
    });
  }); 
  // 第二个图表：同样的AJAX请求，不同的配置
  $.ajax({ url: 'data.php', dataType: 'json' }).done(function(result) {
    drawChart(result, {
      containerId: 'chart2',
      chartType: 'LineChart',
      title: '月度销售趋势折线图'
    });
  }); 
}); 

// 共用的绘制函数
function drawChart(result, config) {
  // 把AJAX返回的JSON数据转换成Google Charts需要的DataTable
  var data = google.visualization.arrayToDataTable(result);
  
  // 根据配置生成图表选项
  var options = {
    title: config.title,
    width: 600,
    height: 400,
    // 其他通用或自定义选项都可以在这里统一或按需设置
  };
  
  // 根据配置创建对应的图表实例，渲染到指定容器
  var chart = new google.visualization[config.chartType](document.getElementById(config.containerId));
  chart.draw(data, options);
}

2. 进阶版：给AJAX请求加差异化参数 #

如果两次请求需要从后端获取不同的数据（比如一个是销售数据，一个是库存数据），可以在AJAX请求时带上参数让后端区分，再配合配置传递给绘制函数：

google.charts.load('current', { packages: ['corechart', 'bar'] }).then(function () { 
  // 请求销售数据，给后端传chart=sales参数
  $.ajax({ 
    url: 'data.php', 
    dataType: 'json',
    data: { chart: 'sales' } // 后端可以根据这个参数返回对应数据
  }).done(function(result) {
    drawChart(result, {
      containerId: 'salesChart',
      chartType: 'ColumnChart',
      title: '月度销售数据'
    });
  }); 
  // 请求库存数据，传chart=stock参数
  $.ajax({ 
    url: 'data.php', 
    dataType: 'json',
    data: { chart: 'stock' }
  }).done(function(result) {
    drawChart(result, {
      containerId: 'stockChart',
      chartType: 'LineChart',
      title: '库存变化趋势'
    });
  }); 
}); 

// 共用的绘制函数，逻辑和基础版一致
function drawChart(result, config) {
  var data = google.visualization.arrayToDataTable(result);
  
  var options = {
    title: config.title,
    width: 600,
    height: 400
  };
  
  var chart = new google.visualization[config.chartType](document.getElementById(config.containerId));
  chart.draw(data, options);
}

3. 高效版：用配置数组批量处理多图表 #

如果之后还要新增更多图表，把所有配置放到一个数组里循环处理会更高效，不用重复写AJAX代码：

google.charts.load('current', { packages: ['corechart', 'bar'] }).then(function () { 
  // 定义所有图表的配置数组，每个元素包含AJAX参数和绘制配置
  var chartConfigs = [
    {
      ajaxParams: { chart: 'sales' },
      drawSettings: {
        containerId: 'salesChart',
        chartType: 'ColumnChart',
        title: '月度销售数据'
      }
    },
    {
      ajaxParams: { chart: 'stock' },
      drawSettings: {
        containerId: 'stockChart',
        chartType: 'LineChart',
        title: '库存变化趋势'
      }
    }
    // 新增图表直接在这里加配置项就行
  ];
  
  // 循环处理每个图表的请求和绘制
  chartConfigs.forEach(function(item) {
    $.ajax({ 
      url: 'data.php', 
      dataType: 'json',
      data: item.ajaxParams
    }).done(function(result) {
      drawChart(result, item.drawSettings);
    });
  });
}); 

function drawChart(result, drawSettings) {
  var data = google.visualization.arrayToDataTable(result);
  
  var options = {
    title: drawSettings.title,
    width: 600,
    height: 400
  };
  
  var chart = new google.visualization[drawSettings.chartType](document.getElementById(drawSettings.containerId));
  chart.draw(data, options);
}

这种方式的好处是代码扩展性极强，新增图表只需要在配置数组里加一项，完全不用修改核心逻辑。

内容的提问来源于stack exchange，提问作者HattrickNZ