如何实现Python图表直接嵌入HTML网页？含数据交互需求

Got it, let's walk through a complete, easy-to-implement solution using Flask. This setup lets users input data in an HTML form, passes those inputs to your Python script, generates a chart with pandas/numpy, and displays the chart back on the web page.

Step 1: Install Required Packages #

First, make sure you have all the tools you need. Open your terminal and run:

pip install flask pandas numpy matplotlib

Step 2: Project Folder Structure #

Organize your files like this to keep things clean:

your_project/
├── app.py          # Your Flask backend script
├── templates/
│   └── index.html  # Your HTML frontend
└── static/         # Stores generated charts

Step 3: Flask Backend Code (app.py) #

This script handles web routing, user input processing, chart generation, and serves the HTML page.

from flask import Flask, render_template, request
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import os
from datetime import datetime

# Configure Flask app
app = Flask(__name__)

# Make sure matplotlib uses a non-interactive backend (required for saving charts)
plt.switch_backend('Agg')

# Replace this with your actual main_data processing logic
def get_main_data(input1, input2, input3):
    # Example: Generate sample DataFrame based on user inputs
    dates = pd.date_range(start=input1, end=input2, freq='D')
    values = np.random.randn(len(dates)) * float(input3) + 50
    df = pd.DataFrame({'Date': dates, 'Value': values})
    return df

def generate_chart(df):
    # Create and save the chart
    plt.figure(figsize=(10, 6))
    plt.plot(df['Date'], df['Value'], marker='o', color='#2ecc71')
    plt.title('Generated Trend Chart')
    plt.xlabel('Date')
    plt.ylabel('Value')
    plt.xticks(rotation=45)
    plt.tight_layout()
    
    # Save chart to static folder (overwrite old chart each time)
    chart_path = os.path.join('static', 'chart.png')
    plt.savefig(chart_path)
    plt.close()
    return chart_path

@app.route('/', methods=['GET', 'POST'])
def index():
    chart_url = None
    if request.method == 'POST':
        # Grab user inputs from the form
        input_start_date = request.form['start_date']
        input_end_date = request.form['end_date']
        input_multiplier = request.form['multiplier']
        
        # Generate data and chart using your logic
        main_data_df = get_main_data(input_start_date, input_end_date, input_multiplier)
        generate_chart(main_data_df)
        
        # Add timestamp to bypass browser cache (so new charts load immediately)
        chart_url = f"/static/chart.png?t={datetime.now().timestamp()}"
    
    # Render the HTML page, passing the chart URL if it exists
    return render_template('index.html', chart_url=chart_url)

if __name__ == '__main__':
    app.run(debug=True)

Step 4: HTML Frontend (templates/index.html) #

This page has a form for user inputs and displays the generated chart.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Chart Generator</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
        .form-group { margin-bottom: 1rem; }
        label { display: block; margin-bottom: 0.5rem; }
        input { padding: 0.5rem; width: 100%; max-width: 300px; }
        button { padding: 0.7rem 1.5rem; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #2980b9; }
        .chart-container { margin-top: 2rem; }
    </style>
</head>
<body>
    <h1>Generate Custom Chart</h1>
    
    <!-- User Input Form -->
    <form method="POST">
        <div class="form-group">
            <label for="start_date">Start Date (YYYY-MM-DD):</label>
            <input type="date" id="start_date" name="start_date" required>
        </div>
        <div class="form-group">
            <label for="end_date">End Date (YYYY-MM-DD):</label>
            <input type="date" id="end_date" name="end_date" required>
        </div>
        <div class="form-group">
            <label for="multiplier">Value Multiplier (e.g., 2):</label>
            <input type="number" id="multiplier" name="multiplier" min="0.1" step="0.1" required>
        </div>
        <button type="submit">Generate Chart</button>
    </form>
    
    <!-- Display Chart if Available -->
    {% if chart_url %}
    <div class="chart-container">
        <h2>Your Generated Chart</h2>
        <img src="{{ chart_url }}" alt="Generated Data Chart" style="width: 100%;">
    </div>
    {% endif %}
</body>
</html>

Step 5: Run the Application #

1. Navigate to your project folder in the terminal.
2. Run python app.py.
3. Open your browser and go to http://localhost:5000.

Key Customization Tips: #

• Data Logic: Replace the get_main_data function with your actual code that uses your main_data variable and user inputs.
• Chart Type: Swap out the matplotlib plot code with seaborn, plotly, or any library you prefer. For interactive charts, plotly can generate HTML strings you can pass directly to the template.
• Input Validation: Add checks (e.g., ensuring start date is before end date) to make the app more robust.

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