单页面多AJAX请求的实现方法与最佳实践（Google Charts场景）

Great question! Let's break down how to expand your Google Charts setup to handle multiple database queries and render corresponding charts—here are practical steps and best practices tailored to your existing setup:

Don't reinvent the wheel with new connections for every query—lean on your existing setup to avoid unnecessary overhead:

• If you're using a connection pool (like pg for PostgreSQL or mysql2 for MySQL), reuse the pool for all your queries. Pools manage connection lifecycle efficiently, so you won't waste resources creating/destroying connections per request.
• Example snippet (Node.js + PostgreSQL):

// Your existing pool setup (keep this!)
const pool = new Pool({
  user: 'your_db_user',
  host: 'your_db_host',
  database: 'your_db',
  password: 'your_db_pass',
  port: 5432,
});

// Reuse the pool for new queries
async function fetchSalesData() {
  const res = await pool.query('SELECT date, total FROM monthly_sales ORDER BY date');
  return res.rows;
}

async function fetchUserSignupData() {
  const res = await pool.query('SELECT week, count FROM weekly_user_signups ORDER BY week');
  return res.rows;
}

Keep your code clean by encapsulating each chart's query and data formatting logic:

• Create a dedicated object or module to map chart identifiers to their respective queries and data transformers. This makes it easy to add new charts later without cluttering your main code.
• Example:

// Centralized chart data config
const chartConfigs = {
  salesTrend: {
    query: 'SELECT date, total FROM monthly_sales ORDER BY date',
    transform: (dbRows) => {
      // Convert DB rows to Google Charts' required array format
      const headers = ['Date', 'Total Sales'];
      const dataRows = dbRows.map(row => [row.date, row.total]);
      return [headers, ...dataRows];
    }
  },
  userGrowth: {
    query: 'SELECT week, count FROM weekly_user_signups ORDER BY week',
    transform: (dbRows) => {
      const headers = ['Week', 'New Users'];
      const dataRows = dbRows.map(row => [row.week, row.count]);
      return [headers, ...dataRows];
    }
  }
};

// Reusable function to fetch and format chart data
async function getChartData(chartId) {
  const { query, transform } = chartConfigs[chartId];
  const res = await pool.query(query);
  return transform(res.rows);
}

Avoid waiting for one query to finish before starting the next—use Promise.all() to execute all required queries in parallel:

• This cuts down on total load time, especially if you have multiple charts to render.
• Example:

// Fetch all chart data at once
async function fetchAllChartData() {
  try {
    const [salesData, userData] = await Promise.all([
      getChartData('salesTrend'),
      getChartData('userGrowth')
    ]);
    return { salesData, userData };
  } catch (err) {
    console.error('Failed to fetch chart data:', err);
    // Return fallback data or handle error gracefully
    return { salesData: [['Date', 'Sales'], ['', 0]], userData: [['Week', 'Users'], ['', 0]] };
  }
}

Each chart needs its own DOM container and initialization logic:

• First, add unique divs to your HTML for each chart:

<div id="sales-chart" style="width: 100%; height: 400px;"></div>
<div id="user-growth-chart" style="width: 100%; height: 400px;"></div>

• Then, initialize each chart separately once your data is loaded (client-side):

// Load Google Charts library (if not already loaded)
google.charts.load('current', {'packages':['corechart']});

async function renderAllCharts() {
  // Fetch data from your backend (e.g., via API call)
  const response = await fetch('/api/chart-data');
  const { salesData, userData } = await response.json();

  google.charts.setOnLoadCallback(() => {
    // Render Sales Trend Chart
    const salesChart = new google.visualization.LineChart(document.getElementById('sales-chart'));
    salesChart.draw(google.visualization.arrayToDataTable(salesData), {
      title: 'Monthly Sales Trend',
      curveType: 'function',
      legend: { position: 'bottom' }
    });

    // Render User Growth Chart
    const userChart = new google.visualization.BarChart(document.getElementById('user-growth-chart'));
    userChart.draw(google.visualization.arrayToDataTable(userData), {
      title: 'Weekly User Signups',
      legend: { position: 'bottom' }
    });
  });
}

// Trigger rendering
renderAllCharts();

• Separate Concerns: Keep database logic, data transformation, and chart rendering in distinct functions/modules. This makes debugging and adding new charts much easier.
• Error Handling: Add try/catch blocks around queries and rendering to avoid breaking all charts if one query fails. Show fallback messages or empty states for affected charts.
• Caching: If your data doesn't update frequently, cache query results (e.g., in-memory or with Redis) to reduce database load and speed up chart rendering.
• Responsive Charts: Use Google Charts' built-in responsive options or window resize listeners to adjust chart sizes when the viewport changes.
• Optimize Large Datasets: For very large datasets, aggregate data server-side (e.g., sum weekly values instead of returning daily rows) to reduce the amount of data sent to the client.

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