파일 메이커에서 JS 라이브러리를 이용한 그래프 표시
표준으로 탑재되고 있는 그래프 기능은 사용하지 않고, 다양한 표현이 가능하고 선택사항이 퍼지는 JavaScript(JS) 라이브러리를 이용합니다.
샘플의 동작 이미지는 이런 느낌입니다.
다음의 그래프는 다른 라이브러리를 사용하고 있습니다만, 레이더 차트등도 표시할 수 있습니다.
그래프는 웹 뷰어를 사용하며 오른쪽에 표시된 데이터는 파일 메이커의 포털에 기록되어 있습니다. 수치 등을 변경하면 그래프에 반영됩니다.
또한 그래프 왼쪽 상단의 드롭다운에서 꺾은선형 차트 등 여러 종류의 그래프로 변경할 수 있습니다.
이용하는 JS 라이브러리에 대해서
이번 이용하는 그래프 표시 라이브러리는 C3.js입니다.
이 라이브러리는 D3.js라는 범용적인 시각화 라이브러리의 래퍼로 그래프의 종류는 한정됩니다만, 데이터의 전달 방법이 파일 메이커와 궁합이 좋았기 때문에 샘플로서 채용했습니다.
물론 데이터의 가공조차 열심히 하면, D3.js를 직접 사용해 오리지날의 데이터 가시화를 실시하는 일도 가능하고, 다른 그래프 라이브러리를 이용하는 것도 가능합니다.
각 라이브러리의 소스는 오프라인에서도 이용할 수 있도록 모두 파일 메이커 안에 보관 유지해 그래프 표시에 사용합니다. 오프라인에 대응한 것으로, iPad에서도 문제 없게 그래프 표시할 수 있습니다.
라이브러리로 사용하는 소스는 다음과 같습니다.
* c3.js D3.js 사이트
* c3.js C3.js 사이트
* c3.css 그래프 표시에 사용할 스타일 시트
위와 함께 표시용 HTML 소스를 사용합니다.
솔루션 파일 설명
각 라이브러리의 소스는 보이지 않는 영역에 텍스트로 저장
소스 업데이트 등을 고려하여 각 소스를 텍스트로 붙여 넣습니다.
붙여 넣은 각 텍스트 개체의 이름을 지정합니다.
HTML 소스의 body 부분만 텍스트로 저장
파일 메이커의 Web 뷰어에 직접 기입하면(자), 백슬래시의 인코딩량이 증가해 버리기 어렵기 때문에,body부만 잘라내 라이브러리와 같이 텍스트로서 보존합니다.
샘플 HTML 코드는 다음과 같습니다.
body부의 코드 <div id="chart"></div>
<script src="d3.min.js"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
padding: { top: 20, right: 100, bottom: 20, left: 100 },
data: { x: 'x',
rows: [
['x','売上'],
FMPDATA
],
type: 'CHARTTYPE',
},
axis: {
x: {type: 'category', },
y: {
tick: { format: d3.format(",") }
}
},
});
</script>
웹 뷰어 내 설정
웹 뷰어의 웹 주소 필드에 다음 설정을 지정합니다.
웹 뷰어 설정 내용Let([~data = ExecuteSQL ( "select name, val from data" ; "','" ; "" );
~chartData = "['" & Substitute ( ~data ; "¶" ; "'],['" ) & "']";
$$Data = ~chartData
];
"data:text/html," &
List (
"<!DOCTYPE html>";
"<head>";
"<meta charset=\"utf-8\">";
"<meta name=\"format-detection\" content=\"telephone=no\" />";
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\">";
"<style type=\"text/css\">";
GetLayoutObjectAttribute ( "c3.min.css" ; "content" );
"</style>";
"</head>";
"<body style=\"border: 0pt;\">"; // optional: scroll=\"no\"
Substitute ( $$HTML.CONTENTS.CHART;
[ " src=\"d3.min.js\">" ; ">" & $$LIB.D3.JS ];
[ " src=\"c3.min.js\">" ; ">" & $$LIB.C3.JS ];
[ "FMPDATA" ; ~chartData ];
[ "CHARTTYPE" ; Startup::chartType ]
);
"</body>";
"</html>";
)
)
조금 해설을 하면, 그래프용의 데이터를 ExecuteSQL로 취득해, c3로 데이터로서 받을 수 있는 형식으로 변환.
그리고는 Substitute 함수로 각 라이브러리의 소스나 데이터에의 치환을 실시하고 있습니다.
List 함수로 둘러싸인 이유는 코드를 쉽게 읽을 수 있기 때문입니다.
스크립트 준비
이번에 필요한 스크립트는 두 가지입니다.
1번째는 기동시에 라이브러리 소스를 변수로서 읽어 표시하는 것.
둘째는 그래프의 종류를 변경했을 때에 화면을 갱신하는 것.
시작시 스크립트
이름을 붙인 각 소스의 텍스트를 GetLayoutObjectAttribute 함수를 이용해 변수화합니다.
이번 경우는 다음과 같은 느낌입니다.
시작시 스크립트의 내용1 # JavaScriptライブラリを偏すにセットする
2 変数を設定 [$$LIB.D3.JS; 値:GetLayoutObjectAttribute ( "d3.min.js" ; "content" )]
3 変数を設定 [$$LIB.C3.JS; 値:GetLayoutObjectAttribute ( "c3.min.js" ; "content" )]
4 変数を設定 [$$LIB.C3.CSS; 値:GetLayoutObjectAttribute ( "c3.min.css" ; "content" )]
5 変数を設定 [$$HTML.CONTENTS.CHART; 値:GetLayoutObjectAttribute ( "html" ; "content" )]
6 ウインドウ内容の再表示 [キャッシュ結合結果を書き込む; キャッシュ外部データを書き込む]
그래프 변경시 스크립트
설정치가 변경되었을 경우에 트리거로부터 불려 가는 스크립트입니다.
단순히 갱신 처리만 하고 있습니다.
그래프 변경시 스크립트의 내용1 ウインドウ内容の再表示 [キャッシュ結合結果を書き込む; キャッシュ外部データを書き込む]
이상입니다.
샘플 파일에서는 관계를 붙이고 있습니다만, 그래프 화면에 데이터를 표시하는 포털을 표시시키기 위한 것이므로, 필수는 아닙니다.
나머지는 샘플 파일 등을 참조하십시오.
샘플 파일
Reference
이 문제에 관하여(파일 메이커에서 JS 라이브러리를 이용한 그래프 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hajisan/items/337456bdaa8ab51463a5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
각 라이브러리의 소스는 보이지 않는 영역에 텍스트로 저장
소스 업데이트 등을 고려하여 각 소스를 텍스트로 붙여 넣습니다.
붙여 넣은 각 텍스트 개체의 이름을 지정합니다.
HTML 소스의 body 부분만 텍스트로 저장
파일 메이커의 Web 뷰어에 직접 기입하면(자), 백슬래시의 인코딩량이 증가해 버리기 어렵기 때문에,body부만 잘라내 라이브러리와 같이 텍스트로서 보존합니다.
샘플 HTML 코드는 다음과 같습니다.
body부의 코드
<div id="chart"></div>
<script src="d3.min.js"></script>
<script src="c3.min.js"></script>
<script>
var chart = c3.generate({
padding: { top: 20, right: 100, bottom: 20, left: 100 },
data: { x: 'x',
rows: [
['x','売上'],
FMPDATA
],
type: 'CHARTTYPE',
},
axis: {
x: {type: 'category', },
y: {
tick: { format: d3.format(",") }
}
},
});
</script>
웹 뷰어 내 설정
웹 뷰어의 웹 주소 필드에 다음 설정을 지정합니다.
웹 뷰어 설정 내용
Let([~data = ExecuteSQL ( "select name, val from data" ; "','" ; "" );
~chartData = "['" & Substitute ( ~data ; "¶" ; "'],['" ) & "']";
$$Data = ~chartData
];
"data:text/html," &
List (
"<!DOCTYPE html>";
"<head>";
"<meta charset=\"utf-8\">";
"<meta name=\"format-detection\" content=\"telephone=no\" />";
"<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge, chrome=1\">";
"<style type=\"text/css\">";
GetLayoutObjectAttribute ( "c3.min.css" ; "content" );
"</style>";
"</head>";
"<body style=\"border: 0pt;\">"; // optional: scroll=\"no\"
Substitute ( $$HTML.CONTENTS.CHART;
[ " src=\"d3.min.js\">" ; ">" & $$LIB.D3.JS ];
[ " src=\"c3.min.js\">" ; ">" & $$LIB.C3.JS ];
[ "FMPDATA" ; ~chartData ];
[ "CHARTTYPE" ; Startup::chartType ]
);
"</body>";
"</html>";
)
)
조금 해설을 하면, 그래프용의 데이터를 ExecuteSQL로 취득해, c3로 데이터로서 받을 수 있는 형식으로 변환.
그리고는 Substitute 함수로 각 라이브러리의 소스나 데이터에의 치환을 실시하고 있습니다.
List 함수로 둘러싸인 이유는 코드를 쉽게 읽을 수 있기 때문입니다.
스크립트 준비
이번에 필요한 스크립트는 두 가지입니다.
1번째는 기동시에 라이브러리 소스를 변수로서 읽어 표시하는 것.
둘째는 그래프의 종류를 변경했을 때에 화면을 갱신하는 것.
시작시 스크립트
이름을 붙인 각 소스의 텍스트를 GetLayoutObjectAttribute 함수를 이용해 변수화합니다.
이번 경우는 다음과 같은 느낌입니다.
시작시 스크립트의 내용1 # JavaScriptライブラリを偏すにセットする
2 変数を設定 [$$LIB.D3.JS; 値:GetLayoutObjectAttribute ( "d3.min.js" ; "content" )]
3 変数を設定 [$$LIB.C3.JS; 値:GetLayoutObjectAttribute ( "c3.min.js" ; "content" )]
4 変数を設定 [$$LIB.C3.CSS; 値:GetLayoutObjectAttribute ( "c3.min.css" ; "content" )]
5 変数を設定 [$$HTML.CONTENTS.CHART; 値:GetLayoutObjectAttribute ( "html" ; "content" )]
6 ウインドウ内容の再表示 [キャッシュ結合結果を書き込む; キャッシュ外部データを書き込む]
그래프 변경시 스크립트
설정치가 변경되었을 경우에 트리거로부터 불려 가는 스크립트입니다.
단순히 갱신 처리만 하고 있습니다.
그래프 변경시 스크립트의 내용1 ウインドウ内容の再表示 [キャッシュ結合結果を書き込む; キャッシュ外部データを書き込む]
이상입니다.
샘플 파일에서는 관계를 붙이고 있습니다만, 그래프 화면에 데이터를 표시하는 포털을 표시시키기 위한 것이므로, 필수는 아닙니다.
나머지는 샘플 파일 등을 참조하십시오.
샘플 파일
Reference
이 문제에 관하여(파일 메이커에서 JS 라이브러리를 이용한 그래프 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hajisan/items/337456bdaa8ab51463a5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1 # JavaScriptライブラリを偏すにセットする
2 変数を設定 [$$LIB.D3.JS; 値:GetLayoutObjectAttribute ( "d3.min.js" ; "content" )]
3 変数を設定 [$$LIB.C3.JS; 値:GetLayoutObjectAttribute ( "c3.min.js" ; "content" )]
4 変数を設定 [$$LIB.C3.CSS; 値:GetLayoutObjectAttribute ( "c3.min.css" ; "content" )]
5 変数を設定 [$$HTML.CONTENTS.CHART; 値:GetLayoutObjectAttribute ( "html" ; "content" )]
6 ウインドウ内容の再表示 [キャッシュ結合結果を書き込む; キャッシュ外部データを書き込む]
1 ウインドウ内容の再表示 [キャッシュ結合結果を書き込む; キャッシュ外部データを書き込む]
Reference
이 문제에 관하여(파일 메이커에서 JS 라이브러리를 이용한 그래프 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hajisan/items/337456bdaa8ab51463a5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
