1

我有 csv 格式的数据，我想创建一个带有图表或表格的网页。我正在使用金字塔框架、变色龙和变形引导。

我是 Web 开发的新手，似乎没有任何教程。谁能指出我正确的方向？

4

1 回答 1

1

不知道更多细节很难说。然而，基本上你需要在你的配置中注册一个路由（在根__init__.py文件中），一个可调用的视图（这可以只是一个方法）来读取文件并将数据传递给渲染器和一个变色龙模板来渲染数据。

首先在你的配置中设置一个路由。例如，要为表格添加一条路线，为图表添加一条路线，您可以在__init__.py文件中执行类似的操作。

config.add_route('show_table', '/table')
config.add_route('show_chart', '/chart')

当然，名称和路径的选择取决于您。

然后，您需要为每个路由实现一个可调用的视图。这些将读取文件并返回包含数据的字典。他们还将数据绑定到特定的渲染器，在您的情况下是变色龙模板。对于两条路线都需要相同数据的情况，这样的事情可能是正确的。

from pyramid.view import view_config

def read_file():
    """read the file and return the data in a suitable format"""
    return [1,4,2,4,56,7,45,3]

@view_config(route_name='show_table', renderer='templates/table.pt')
def table_view(request):
    data = read_file()
    return {'data': data}

@view_config(route_name='show_chart', renderer='templates/chart.pt')
def chart_view(request):
    data = read_file()
    return {'data': data}

最后，您将需要实现模板文件。这些将根据您的需要而有所不同。

<!DOCTYPE html>
<html xmlns:tal="http://xml.zope.org/namespaces/tal">

<head>
</head>

<body>
    <table>
        <tr><th>Data</th></tr>
        <tr tal:repeat="datum data"><td>${datum}</td></tr>
    </table>
</body>

</html>

为了制作图表，我使用 d3.js，但这是我认为的另一个问题。这是一个基于本教程第一步的简单示例。首先，您的模板需要使数据可用于 javascript。一种方法是将数据写入 javascript 变量。这将起作用，但有点混乱 - 请参阅此问题以了解替代方法。在一个真实的应用程序中，您可能想要使用 ajax，因此您需要编写 url 来访问此处的数据。

<!DOCTYPE html>
<html xmlns:tal="http://xml.zope.org/namespaces/tal">

<head>
   <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
    <div class="chart"></div>
    <script type="text/javascript">
       var data = ${data};
       var x = d3.scale.linear()
         .domain([0, d3.max(data)])
         .range([0, 420]);

       d3.select(".chart")
        .selectAll("div").data(data)
        .enter().append("div")
          .style("width", function(d) { return x(d) + "px"; })
          .text(function(d) { return d; });
    </script>
</body>

</html>

这应该可以，但未经测试，如果您有任何问题，请告诉我，我会在有时间时更新它。

于 2014-02-20T22:41:52.803 回答