如何在Google Chart中设置三轴：左Y轴为数量、右Y轴为日期、X轴为订单时间

Hey there! Let's get your three-axis Google Chart set up properly—you're already halfway there with your dual-axis code, so we just need to tweak a few key parts to match your requirements. Here's a step-by-step breakdown with adjusted code:

1. Adjust Your Data Structure #

First, your dataset needs to include three core columns to map to each axis:

• Order-time (for the horizontal X-axis)
• Quantity (Qty, for the left vertical Y-axis)
• Date value (for the right vertical Y-axis; we’ll use Google’s Date object to treat dates as numeric values for axis rendering)

2. Configure Axes & Series Mapping #

In the chart options, we’ll define two distinct vertical axes and explicitly map each data series to its corresponding axis. We’ll also fine-tune the horizontal axis for order-time display.

Full Working Code Example #

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

function drawChart() {
  // Sample data (replace this with your PHP-fetched database data)
  var data = google.visualization.arrayToDataTable([
    ['Order-Time', 'Qty', 'Target Date'],
    ['09:00', 15, new Date(2024, 4, 10)], // Month is 0-indexed (4 = May)
    ['10:30', 22, new Date(2024, 4, 12)],
    ['12:15', 18, new Date(2024, 4, 11)],
    ['14:45', 25, new Date(2024, 4, 13)],
    ['16:00', 19, new Date(2024, 4, 10)]
  ]);

  var options = {
    title: 'Orders: Quantity vs Target Date',
    hAxis: {
      title: 'Order Time',
      format: 'HH:mm', // Match your order-time string format
      slantedText: true // Prevents label overlap
    },
    // Define two vertical axes (left = index 0, right = index 1)
    vAxes: {
      0: { title: 'Quantity (Qty)', minValue: 0 }, // Left Y-axis for Qty
      1: { title: 'Target Date', format: 'MM/dd/yyyy' } // Right Y-axis for dates
    },
    // Map each data series to the correct axis
    series: {
      0: { targetAxisIndex: 0 }, // Qty series uses left Y-axis
      1: { targetAxisIndex: 1, type: 'line' } // Date series uses right Y-axis; set chart type if needed
    },
    legend: { position: 'top' }
  };

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

Key Tips for PHP Database Integration #

When pulling data from your database with PHP:

• Order-time: Pass it as a formatted string (e.g., HH:mm for time-only values) that Google Charts can parse.
• Qty: Ensure it’s passed as a numeric value (integer or float) instead of a string.
• Right Y-axis dates: Convert your database date (e.g., YYYY-MM-DD) to a Google Date object in JavaScript. Use this PHP snippet to generate valid rows:

  // Example PHP code to generate data rows
  echo "['" . $row['order_time'] . "', " . $row['qty'] . ", new Date(" . date('Y, n-1, j', strtotime($row['target_date'])) . ")],";
  

  Note: Google’s Date uses 0-indexed months, so we subtract 1 from the PHP month value to match.

Why This Works #

• We use vAxes to define two separate vertical axes (indexes 0 and 1) with unique titles and formatting.
• The series option maps each data column to its respective axis using targetAxisIndex.
• Dates on the right axis are automatically formatted using Google’s built-in date formatter, so they display as readable dates instead of raw timestamps.

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