Google Charts数组拆分优化及折线图数据组织咨询

I totally get your frustration—having to pad arrays with null values when your line datasets have different dates is a pain, especially when pulling data directly from a database. Here's a clean, scalable way to handle this without manual nulls:

Step 1: Fetch your line data from the database #

First, get each line's data as a separate array of [Date, value] pairs. This aligns perfectly with how you'd query data for individual lines from a database:

// Line 1 data from your database
const line1Data = [
  [new Date(2013, 0), 5],
  [new Date(2012, 11), 2],
  [new Date(2012, 10), 5]
];

// Line 2 data from your database (with non-overlapping dates)
const line2Data = [
  [new Date(2013, 0), 2],
  [new Date(2012, 9), 0],
  [new Date(2012, 8), 1]
];

// Line 3 data from your database
const line3Data = [
  [new Date(2013, 0), 1],
  [new Date(2012, 11), 2],
  [new Date(2012, 8), 3]
];

Step 2: Collect and sort all unique dates #

We need to gather every date from all datasets, remove duplicates, and sort them to ensure the chart displays in logical chronological order:

// Combine all dates from every line dataset
const allDates = [
  ...line1Data.map(item => item[0]),
  ...line2Data.map(item => item[0]),
  ...line3Data.map(item => item[0])
];

// Remove duplicates and sort (newest to oldest here—reverse the sort for oldest to newest)
const uniqueDates = [...new Set(allDates.map(date => date.toISOString()))]
  .map(isoString => new Date(isoString))
  .sort((a, b) => b - a);

Step 3: Build the DataTable dynamically #

Now we'll create a DataTable, add columns for the date and each line, then populate rows with values where they exist. Google Charts automatically handles missing values (no need for manual null padding):

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  const data = new google.visualization.DataTable();
  
  // Add the date column first
  data.addColumn('date', 'Date');
  // Add a column for each line
  data.addColumn('number', 'Line 1');
  data.addColumn('number', 'Line 2');
  data.addColumn('number', 'Line 3');

  // Create maps to quickly look up values by date (way faster than looping each time)
  const line1Map = new Map(line1Data.map(item => [item[0].toISOString(), item[1]]));
  const line2Map = new Map(line2Data.map(item => [item[0].toISOString(), item[1]]));
  const line3Map = new Map(line3Data.map(item => [item[0].toISOString(), item[1]]));

  // Populate rows with unique dates and their corresponding values
  uniqueDates.forEach(date => {
    const dateISO = date.toISOString();
    data.addRow([
      date,
      line1Map.get(dateISO), // Returns undefined if no value—Charts ignores this
      line2Map.get(dateISO),
      line3Map.get(dateISO)
    ]);
  });

  // Configure your chart options
  const options = {
    title: 'Line Chart with Mismatched Dates',
    curveType: 'function',
    legend: { position: 'bottom' },
    hAxis: { format: 'MMM yyyy' }
  };

  // Draw the chart
  const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

How this works: #

• Map lookups: Using Map objects lets us quickly find a line's value for any date, making the code efficient even with large datasets.
• Missing values handled automatically: When a line doesn't have data for a date, Map.get() returns undefined. Google Charts skips these points entirely—no gaps forced by null values, and lines will only connect the points that exist.
• Database-friendly: This setup directly maps to how you'd pull data for individual lines from a database (one query per line, returning date-value pairs).

Bonus: Handle dynamic line counts #

If you don't know how many lines you'll have upfront (e.g., pulling data from a variable number of database queries), adjust the code to scale automatically:

// Example: Dynamic array of line datasets (each with a name and its data)
const lineDatasets = [
  { name: 'Line A', data: line1Data },
  { name: 'Line B', data: line2Data },
  { name: 'Line C', data: line3Data }
];

// Inside the drawChart function:
const data = new google.visualization.DataTable();
data.addColumn('date', 'Date');

// Create maps for each line and add columns dynamically
const lineMaps = [];
lineDatasets.forEach(line => {
  data.addColumn('number', line.name);
  lineMaps.push(new Map(line.data.map(item => [item[0].toISOString(), item[1]])));
});

// Populate rows dynamically
uniqueDates.forEach(date => {
  const dateISO = date.toISOString();
  const row = [date];
  lineMaps.forEach(map => row.push(map.get(dateISO)));
  data.addRow(row);
});

This way, you can add or remove lines without rewriting core chart code.

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