使用金字塔框架創建包含csv數據的圖表或表格的網頁

我有csv格式的數據，我想創建一個包含圖表或表格的網頁。我使用金字塔框架，變色龍和deform_bootstrap。使用金字塔框架創建包含csv數據的圖表或表格的網頁

我是網絡開發新手，似乎沒有任何教程。任何人都可以將我指向正確的方向嗎？

2014-02-20 EnergyGeek

你可以看看它是如何完成與jinja2模板引擎在這裏 - > http://stackoverflow.com/questions/21551154/creating-a-data-structure-in-python-for-use- in-a-jinja2-template ... Chameleon會有稍微不同的語法和循環 – Raj

@EnergyGeek，如果你發佈更多的細節，那麼我可以提供更詳細的答案。 –

不知道更多的細節它很難說。然而，基本上你需要一個在你的配置中註冊的路由（在根文件__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>

這應該工作，但沒有經過測試，如果您有任何問題讓我知道，我會更新它，當我有一個時刻。

來源

2014-02-20 22:41:52

其實從這裏到圖表會非常有用。你有沒有使用金字塔d3.js的簡單例子？ – EnergyGeek

我已經添加了一個圖表示例，未經測試。讓我知道你是怎麼辦的。 –

使用金字塔框架創建包含csv數據的圖表或表格的網頁

回答

相關問題