Question

我有csv格式的数据，我想创建一个包含图表或表格的网页。我正在使用Pyramid Framework，chameleon和deform_bootstrap。

我是网络开发的新手，似乎没有任何相关的教程。有人能指出我正确的方向吗？

Answer 1

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

首先在configuration中设置路线。例如，要为表格添加路线，为图表添加一个路线，您可以在__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，但这是我想的另一个问题。以下是基于this tutorial中第一步的简单示例。首先，您的模板需要将数据提供给javascript。一种方法是将数据写入javascript变量。这可行但有点乱 - 请参阅this question了解其他方法。在真实的应用程序中，您可能希望使用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>

这应该有效，但未经测试，如果您有任何问题请告诉我，我会在有片刻时更新。

使用金字塔框架从csv数据创建包含图表或表格的网页

1 个答案: