Alone이라는 프레임 워크의 그래프 그리기 기능을 활용하여 SVG로 그래프를 그립니다.
소개
웹사이트에서 그래프를 표시할 필요가 있고, 여러가지 고민하고 있으면 Alone라는 프레임워크의 그래프 그리기 기능을 사용해 할 수 있는 것을 알았으므로, 그 방법을 메모해 둡니다.
다운로드
공식 사이트에서 최신 버전을 다운로드합니다. (글쓰기 시 현재 3.3)
Alone - Application Framework for Embedded Systems
필요한 파일 꺼내기
다운로드한 파일을 압축해제하면 파일이 많이 나오지만 필요한 것은 다음의 3가지입니다.
공식 사이트에서 최신 버전을 다운로드합니다. (글쓰기 시 현재 3.3)
Alone - Application Framework for Embedded Systems
필요한 파일 꺼내기
다운로드한 파일을 압축해제하면 파일이 많이 나오지만 필요한 것은 다음의 3가지입니다.
파일 변경
위의 파일을 만드는 스크립트와 같은 폴더에 복사하여 다음과 같이 수정합니다.
내용은 "require"를 "load"로 바꾸고 명칭 뒤에 ".rb"를 추가한다.
al_graph.rb#require 'al_graph_base'
load 'al_graph_base.rb'
al_graph_base.rb#require 'al_graph_base'
load 'al_main.rb'
웹 응용 프로그램의 스크립트 시작을 억제하기 위해 477 행을 주석 처리.
al_main.rb #_start()
그래프 그리기
graph.rb#!/usr/local/bin/ruby
load 'al_graph.rb'
puts <<EOF
Content-type: image/svg+xml
EOF
ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ]
graph = AlGraph.new
graph.add_data_line(ydata1)
graph.draw
위의 스크립트를 실행하면 SVG가 출력됩니다.
$ ruby graph.rb
HTML 만들기
Alone 파일과 위의 스크립트를 서버로 옮기고 스크립트에 실행 권한을 부여하고 다음 HTML을 작성하여 생성 된 SVG를 읽습니다.
sample.html<html>
<head>
<title>Graph sample</title>
</head>
<body>
<img src="graph.rb" />
</body>
</html>
브라우저를 시작하고 파일에 액세스하면 ...
할 수 있었다!
나머지는 라벨을 조정하거나 배경색을 변경하거나 ... 아직도 할 일 가득하네요.
Reference
이 문제에 관하여(Alone이라는 프레임 워크의 그래프 그리기 기능을 활용하여 SVG로 그래프를 그립니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mix_dvd/items/d0c2fccd67619cb9c34a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
#require 'al_graph_base'
load 'al_graph_base.rb'
#require 'al_graph_base'
load 'al_main.rb'
#_start()
graph.rb
#!/usr/local/bin/ruby
load 'al_graph.rb'
puts <<EOF
Content-type: image/svg+xml
EOF
ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ]
graph = AlGraph.new
graph.add_data_line(ydata1)
graph.draw
위의 스크립트를 실행하면 SVG가 출력됩니다.
$ ruby graph.rb
HTML 만들기
Alone 파일과 위의 스크립트를 서버로 옮기고 스크립트에 실행 권한을 부여하고 다음 HTML을 작성하여 생성 된 SVG를 읽습니다.
sample.html<html>
<head>
<title>Graph sample</title>
</head>
<body>
<img src="graph.rb" />
</body>
</html>
브라우저를 시작하고 파일에 액세스하면 ...
할 수 있었다!
나머지는 라벨을 조정하거나 배경색을 변경하거나 ... 아직도 할 일 가득하네요.
Reference
이 문제에 관하여(Alone이라는 프레임 워크의 그래프 그리기 기능을 활용하여 SVG로 그래프를 그립니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mix_dvd/items/d0c2fccd67619cb9c34a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<title>Graph sample</title>
</head>
<body>
<img src="graph.rb" />
</body>
</html>
Reference
이 문제에 관하여(Alone이라는 프레임 워크의 그래프 그리기 기능을 활용하여 SVG로 그래프를 그립니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mix_dvd/items/d0c2fccd67619cb9c34a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
