【03.04】大数据教程--html+css基础

当谈到大数据时,HTML和CSS可能并不是最相关的技术。HTML和CSS主要用于构建网页和应用程序的用户界面,而大数据则涉及处理和分析大规模数据集。但是,如果您想展示有关大数据的信息或结果,并在网页上呈现,那么HTML和CSS可以用于创建具有吸引力和交互性的数据可视化。

以下是一个基础示例,展示如何使用Python生成一些模拟的大数据,并将其以表格和图表的形式在网页上呈现。我们将使用Flask作为Python的Web框架来创建一个简单的服务器,并使用HTML和CSS来呈现数据。

步骤1:安装必要的库

首先,确保您已经安装了Python和Flask。在命令行中运行以下命令安装Flask:

pip install flask

步骤2:创建一个Flask应用

创建一个名为app.py的Python文件,并在其中添加以下内容:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = [
        {'name''John''age'25'country''USA'},
        {'name''Emma''age'32'country''Canada'},
        {'name''Li''age'28'country''China'},
        {'name''Anna''age'30'country''Germany'},
    ]
    return render_template('index.html', data=data)

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

上述代码创建了一个简单的Flask应用,并定义了一个名为index的路由。在该路由函数中,我们创建了一个包含一些模拟数据的Python列表,并将其作为参数传递给render_template函数。

步骤3:创建HTML模板

创建一个名为index.html的HTML文件,并在其中添加以下内容:

html>
<html>
<head>
    <title>Big Data Visualizationtitle>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
head>
<body>
    <h1>Big Data Visualizationh1>
    <table>
        <thead>
            <tr>
                <th>Nameth>
                <th>Ageth>
                <th>Countryth>
            tr>
        thead>
        <tbody>
            {% for item in data %}
            <tr>
                <td>{{ item.name }}td>
                <td>{{ item.age }}td>
                <td>{{ item.country }}td>
            tr>
            {% endfor %}
        tbody>
    table>
    <div id="chart">div>
    <script src="https://cdn.plot.ly/plotly-latest.min.js">script>
    <script>
        var data = [
            {x: ['John''Emma''Li''Anna'], y: [25322830], type'bar'}
        ];
        Plotly.newPlot('chart', data);
    
script>
body>
html>

上述代码

定义了一个简单的HTML模板。在

元素中,我们使用了一个for循环来迭代数据,并在表格中显示每个数据项的属性。在
元素中,我们使用了Plotly库来创建一个简单的柱状图,图表数据直接写在JavaScript中。

步骤4:创建CSS样式表

创建一个名为styles.css的CSS文件,并在其中添加以下内容:

table {
    border-collapse: collapse;
    width100%;
}

thtd {
    border1px solid #ddd;
    padding8px;
}

th {
    background-color#f2f2f2;
}

h1 {
    text-align: center;
}

#chart {
    width400px;
    height300px;
    margin0 auto;
}

上述代码定义了一些基本的CSS样式,用于美化表格和图表。

步骤5:运行应用

在命令行中运行以下命令来启动Flask应用:

python app.py

Flask应用将在本地主机上的默认端口(通常是http://127.0.0.1:5000/)启动。

本文由 mdnice 多平台发布

你可能感兴趣的:(程序人生)