C3.js 산점도의 X축에 문자열 표시
산포도나 버블 차트를 그릴 수 있는 JavaScript 라이브러리는 몇 종류가 있습니다만, X축의 표기를 문자열로 하는 방법이 좀처럼 찾아낼 수 없었습니다만, 이번 겨우 방법을 알았습니다.
벌써 알고 있는 분에게는 아무 일도 없는 내용입니다만, 나와 같이 곤란하고 있는 분도 분명 있을 것이라고 생각 기록해 둡니다.
완성된 그래프는 다음과 같은 느낌입니다.
사실 마우스로 데이터를 가리키고 있습니다.
그림은 가리킨 데이터의 세부 사항이 툴팁으로 표시되는 상태입니다.
C3.js란?
C3은 차트에 특화된 시각화 라이브러리입니다. D3의 래퍼 라이브러리로, D3의 외형의 아름다움이나 인터랙션성 등의 특징을 남기면서, 차트 라이브러리로서 알기 쉬운 인터페이스를 제공한다는 방침으로 개발을 진행하고 있습니다.
C3.js 개발자 블로그에서
그래프의 종류도 기본적인 것은 갖추어져 있어 데이터의 핸들링도 용이하게
설계되어 있으므로 매우 편리하게 사용하고 있습니다. 개발자에게 감사드립니다.
기본적인 사용 방법 등에 대해서는 C3.js 사이트를 참조하십시오.
샘플과 참조도 갖추어져 있습니다.
C3.js 사이트
산점도의 구현 포인트
그럼 산포도의 작성 방법에 대해서, 구현의 포인트가 된 부분에 대해서 설명해 갑니다.
완성된 샘플 소스 세트는 페이지의 마지막에 게재해 두므로, 이쪽도 참조해 주세요.
HTML 파일의 내용
내용으로는 간단합니다.
그래프 표시에 필요한 CSS나 JS 파일을 읽어, 그래프 표시 영역용의 div 태그를 설정해, c3 의 정의와 데이터는 다른 파일로부터 읽어들이도록 했습니다.
그래프 표시용 HTML 파일<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>散布図サンプル</title>
<!-- Load c3.css -->
<link href="c3.min.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="c3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>c3.jsを利用した散布図のサンプル</h1>
<div id="chart"></div>
<script src="C3scatter_sample.js" type="text/javascript"></script>
</body>
</html>
c3 그래프 정의 파일 내용
x축에 관한 정의 내용
산점도의 묘화용 데이터로 x축의 값은 캐릭터 라인은 아니고, 수치를 이용할 필요가 있습니다. 그 때문에, 그대로 그래프를 표시했을 경우는 x축의 표기는 수치가 줄지어 있습니다. 게다가 데이터로서 소수점치가 없어도, 소수의 축도 작성되어 버립니다.
그 대책으로서, 각 수치를 캐릭터 라인으로 변환하는 case문과, values에 의해 x축에 표시 대상을 좁히고 있습니다.
그리고는, padding으로 좌우에 스페이스를 만들어 멋지게 정돈하고 있습니다.
axis의 x 정의 x: {
label: '部門',
tick: {
format: function(d){ // x軸の名称を数値から文字列に変換
switch(d){
case 1: return("役員");
case 2: return("社員");
case 3: return("パート");
default: return(d);
}
},
values: [1,2,3] // x軸に表示する値を限定
},
padding: {
left: 1,
right: 1,
}
},
y축에 대한 정의 내용
y축에는 금액을 표시하고 있으므로, 3자리수씩의 콤마 단락으로 하고 있습니다.
axis의 y 정의 y: {
label: '支給額',
tick: { // y軸の金額をカンマ区切りに
format: d3.format(',')
}
}
툴팁에 대한 정의 내용
d3의 format 함수를 이용해, 수치의 콤마를 더한 다음, 「원」과 건수 표시를 하도록(듯이) 정의하고 있습니다.
tooltip 정의 tooltip: {
format: { // 各値のツールチップ表示内容を変更
value: function (value, ratio, id, index) { return d3.format(',')(value) + '円, ' + index+'件'; }
}
},
그래프용 데이터의 정의 내용
데이터는 SQL등에서 취득한 데이터를 취급하기 쉽게 하기 위해서 rows로 정의해 보았습니다.
c3는 그 외에 json 형식의 데이터 등도 로드 가능합니다.
데이터 정의 data: {
labels: true,
xs: {
'支給額': '部門'
},
type: 'scatter', // グラフとして散布図(scatter plot)を指定
rows:[ // SQLなどによるデータ加工しやすいようにrows形式でデータ定義
['支給額','部門'],
[2500000,1],
[1500000,1],
[249000,2],
[494000,2],
[325000,2],
[290000,2],
[449000,2],
[313000,2],
// 実際には以下にデータが続きます
]
}
설명은 이상입니다.
그 외에 그리드의 표시등을 하고 있습니다만, 설명하고 있지 않는 부분은 실제의 소스를 참조해 주세요.
샘플 파일은 여기
Reference
이 문제에 관하여(C3.js 산점도의 X축에 문자열 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hajisan/items/4442efde9c60203cbbc9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
그럼 산포도의 작성 방법에 대해서, 구현의 포인트가 된 부분에 대해서 설명해 갑니다.
완성된 샘플 소스 세트는 페이지의 마지막에 게재해 두므로, 이쪽도 참조해 주세요.
HTML 파일의 내용
내용으로는 간단합니다.
그래프 표시에 필요한 CSS나 JS 파일을 읽어, 그래프 표시 영역용의 div 태그를 설정해, c3 의 정의와 데이터는 다른 파일로부터 읽어들이도록 했습니다.
그래프 표시용 HTML 파일
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>散布図サンプル</title>
<!-- Load c3.css -->
<link href="c3.min.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="c3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>c3.jsを利用した散布図のサンプル</h1>
<div id="chart"></div>
<script src="C3scatter_sample.js" type="text/javascript"></script>
</body>
</html>
c3 그래프 정의 파일 내용
x축에 관한 정의 내용
산점도의 묘화용 데이터로 x축의 값은 캐릭터 라인은 아니고, 수치를 이용할 필요가 있습니다. 그 때문에, 그대로 그래프를 표시했을 경우는 x축의 표기는 수치가 줄지어 있습니다. 게다가 데이터로서 소수점치가 없어도, 소수의 축도 작성되어 버립니다.
그 대책으로서, 각 수치를 캐릭터 라인으로 변환하는 case문과, values에 의해 x축에 표시 대상을 좁히고 있습니다.
그리고는, padding으로 좌우에 스페이스를 만들어 멋지게 정돈하고 있습니다.
axis의 x 정의
x: {
label: '部門',
tick: {
format: function(d){ // x軸の名称を数値から文字列に変換
switch(d){
case 1: return("役員");
case 2: return("社員");
case 3: return("パート");
default: return(d);
}
},
values: [1,2,3] // x軸に表示する値を限定
},
padding: {
left: 1,
right: 1,
}
},
y축에 대한 정의 내용
y축에는 금액을 표시하고 있으므로, 3자리수씩의 콤마 단락으로 하고 있습니다.
axis의 y 정의
y: {
label: '支給額',
tick: { // y軸の金額をカンマ区切りに
format: d3.format(',')
}
}
툴팁에 대한 정의 내용
d3의 format 함수를 이용해, 수치의 콤마를 더한 다음, 「원」과 건수 표시를 하도록(듯이) 정의하고 있습니다.
tooltip 정의
tooltip: {
format: { // 各値のツールチップ表示内容を変更
value: function (value, ratio, id, index) { return d3.format(',')(value) + '円, ' + index+'件'; }
}
},
그래프용 데이터의 정의 내용
데이터는 SQL등에서 취득한 데이터를 취급하기 쉽게 하기 위해서 rows로 정의해 보았습니다.
c3는 그 외에 json 형식의 데이터 등도 로드 가능합니다.
데이터 정의
data: {
labels: true,
xs: {
'支給額': '部門'
},
type: 'scatter', // グラフとして散布図(scatter plot)を指定
rows:[ // SQLなどによるデータ加工しやすいようにrows形式でデータ定義
['支給額','部門'],
[2500000,1],
[1500000,1],
[249000,2],
[494000,2],
[325000,2],
[290000,2],
[449000,2],
[313000,2],
// 実際には以下にデータが続きます
]
}
설명은 이상입니다.
그 외에 그리드의 표시등을 하고 있습니다만, 설명하고 있지 않는 부분은 실제의 소스를 참조해 주세요.
샘플 파일은 여기
Reference
이 문제에 관하여(C3.js 산점도의 X축에 문자열 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hajisan/items/4442efde9c60203cbbc9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
