피라미드 프레임 워크를 사용하여 CSV 데이터에서 차트 또는 표가있는 웹 페이지 만들기

데이터가 CSV 형식이며 차트 또는 표가있는 웹 페이지를 만들고 싶습니다. Pyramid Framework, Chameleon 및 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 ... 카멜레온은 약간 다른 구문과 루핑을 갖습니다. – Raj

@EnergyGeek, 자세한 내용을 게시하면보다 자세한 답변을 제공 할 수 있습니다. –

자세한 내용을 알지 못해서 말하는 것이 어렵습니다. 그러나 기본적으로 config에 등록 된 루트 (루트 __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을 기반으로 한 간단한 예입니다. 먼저 템플릿에서 데이터를 자바 스크립트에서 사용할 수있게해야합니다. 한 가지 방법은 자바 스크립트 변수에 데이터를 쓰는 것입니다. 이것은 효과가 있지만 약간 지저분합니다. this question을 참조하십시오. 실제 응용 프로그램에서는 아약스를 사용하여 여기에 데이터에 액세스 할 수있는 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

실제로 여기에서 차트로가는 것이 매우 유용 할 것입니다. Pyramid와 함께 d3.js를 사용하는 간단한 예제가 있습니까? – EnergyGeek

테스트되지 않은 차트 예제를 추가했습니다. 어떻게 지내는지 알려줘. –

피라미드 프레임 워크를 사용하여 CSV 데이터에서 차트 또는 표가있는 웹 페이지 만들기

답변

관련 문제