Plotly.js数据格式适配：API返回数据转Plotly要求结构

Got it, let's solve this format conversion problem for your large dataset. Whether you're working in JavaScript or Python, here are practical, efficient ways to turn your API's nested response into Plotly-friendly flat arrays:

JavaScript Solutions #

Basic Conversion (Most Use Cases) #

The native map() method is clean and efficient for most datasets. It lets you extract the labels and values you need in just a few lines:

// Sample API response structure
const apiData = [
  { "metadata": {"colName": "Residential"}, "value": 19 },
  { "metadata": {"colName": "Non-Residential"}, "value": 26 },
  { "metadata": {"colName": "Utility"}, "value": 55 }
];

// Convert to Plotly Pie Chart format
const pieChartData = [
  {
    values: apiData.map(item => item.value),
    labels: apiData.map(item => item.metadata.colName),
    type: 'pie'
  }
];

// Convert to Plotly Bar Chart format
const barChartData = [
  {
    x: apiData.map(item => item.metadata.colName),
    y: apiData.map(item => item.value),
    type: 'bar'
  }
];

Optimized for Large Datasets #

If your dataset is extremely large, avoid double-traversing the array (the map() calls above iterate twice). Instead, use a single loop to collect both labels and values:

const labels = [];
const values = [];

// Single pass through the data
for (const item of apiData) {
  labels.push(item.metadata.colName);
  values.push(item.value);
}

// Build optimized Plotly data
const optimizedPieData = [
  {
    values: values,
    labels: labels,
    type: 'pie'
  }
];

Filtered/Sliced Data #

If you only need a subset of your data (e.g., specific categories), add a filter() step before converting:

// Keep only specific categories
const filteredData = apiData.filter(item => 
  ['Residential', 'Utility'].includes(item.metadata.colName)
);

const filteredBarData = [
  {
    x: filteredData.map(item => item.metadata.colName),
    y: filteredData.map(item => item.value),
    type: 'bar'
  }
];

Python Solutions #

If you're using Plotly in Python, list comprehensions are the go-to for this conversion:

# Sample API response data
api_data = [
    {"metadata": {"colName": "Residential"}, "value": 19},
    {"metadata": {"colName": "Non-Residential"}, "value": 26},
    {"metadata": {"colName": "Utility"}, "value": 55}
]

# Convert to Plotly Pie Chart format
pie_chart_data = [{
    "values": [item["value"] for item in api_data],
    "labels": [item["metadata"]["colName"] for item in api_data],
    "type": "pie"
}]

# Convert to Plotly Bar Chart format
bar_chart_data = [{
    "x": [item["metadata"]["colName"] for item in api_data],
    "y": [item["value"] for item in api_data],
    "type": "bar"
}]

Optimized for Large Python Datasets #

For very large datasets in Python, a loop can be more memory-efficient than list comprehensions (though the difference is minimal for most cases):

labels = []
values = []

for item in api_data:
    labels.append(item["metadata"]["colName"])
    values.append(item["value"])

pie_chart_data = [{"values": values, "labels": labels, "type": "pie"}]

All these approaches will seamlessly translate your API's nested structure into the flat array format Plotly requires, while keeping performance in mind for large datasets.

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