Google折线图交换X/Y轴遇数据类型错误的解决咨询

Hey, let's get that Google Line Chart error sorted out! The "All series on a given axis must be of the same data type" message is a clear hint—you can’t mix data types on a single axis, which is exactly what was happening when you tried swapping IPs (strings) to the Y-axis and percentages (numbers) to the X-axis without adjusting how the chart interprets your data.

Here's the straightforward fix to get IP addresses on the Y-axis and percentages on the X-axis:

Step 1: Adjust Your Data Structure #

Instead of putting numerical values first, structure your DataTable with the IP address as the first column (domain axis) (since it’s your categorical value), followed by your numerical percentage columns. This keeps each axis’s data type consistent:

var performanceData = new google.visualization.DataTable();
// First column: Server IP (string, will become our Y-axis)
performanceData.addColumn('string', 'Server IP');
// Subsequent columns: Numerical usage metrics (will become our X-axis)
performanceData.addColumn('number', 'CPU Usage');
performanceData.addColumn('number', 'Memory Usage');

// Populate rows in the correct order: IP → CPU → Memory
for (var n = 0; n < serverStatuses.length; n++) {
  performanceData.addRow([
    serverStatuses[n].ipAddress,
    serverStatuses[n].cpuUsage,
    serverStatuses[n].memoryUsage
  ]);
}

If you prefer the cleaner arrayToDataTable syntax, this works too:

// Build a 2D array with headers first
var dataArray = [['Server IP', 'CPU Usage', 'Memory Usage']];
for (var n = 0; n < serverStatuses.length; n++) {
  dataArray.push([
    serverStatuses[n].ipAddress,
    serverStatuses[n].cpuUsage,
    serverStatuses[n].memoryUsage
  ]);
}
var performanceData = google.visualization.arrayToDataTable(dataArray);

Step 2: Configure the Chart for Horizontal Orientation #

By default, Line Chart uses the first column as the X-axis (domain) and numerical columns as Y-axis values. To flip this (put IPs on Y-axis and percentages on X-axis), add the orientation: 'horizontal' option when drawing the chart:

var chart = new google.visualization.LineChart(document.getElementById('your-chart-container-id'));
chart.draw(performanceData, {
  orientation: 'horizontal', // This setting flips the axes to match your needs
  hAxis: { title: 'Usage Percentage' }, // Label for your percentage X-axis
  vAxis: { title: 'Server IP' }, // Label for your IP Y-axis
  legend: 'top',
  width: 600,
  height: 400
});

Why This Works #

• The orientation: 'horizontal' flag tells the chart to use the first column (IP strings) as the Y-axis (domain) and the numerical columns as the X-axis values.
• Now the Y-axis only contains string values (IPs) and the X-axis only contains numerical values (percentages)—no mixed types, so the error vanishes.
• This setup perfectly matches your requirement of showing IP addresses on the Y-axis and percentages on the X-axis as a line chart.

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