acryl-bias-chart v0.4.1
Bias-chart
d3.js 기반 React 라이브러리 입니다.
npm package : https://www.npmjs.com/package/acryl-bias-chart
git-pages : https://dawson-park.github.io/bias-chart/
Installation
npm i acryl-bias-chart
Usage
Import
import { Bar } from "acryl-bias-chart";
Props
Name | Type | Default | Description |
---|---|---|---|
data | number[][] | 그래프를 나타내는데 사용될 데이터 | |
id | string | undefined | 차트의 id |
xDomain | string[] | undefined | x축의 이름 |
zDomain | string[] | undefined | 데이터 그룹의 이름 |
width | string | '100%' | 차트의 너비 |
height | string | '100%' | 차트의 높이 |
label | string | undefined | y축의 라벨 |
Single Graph
const data = [
[59, 84, 78, 63, 87, 89]
];
<div>
<Bar id={"bar"} data={data} />
</div>
id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.
Multiple Graph
const data = [
[59, 84, 78, 63, 87, 89],
[66, 16, 60, 30, 130, 62],
];
<div>
<Bar id={"bar"} data={data} />
</div>
xDomain 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
<div>
<Bar id={"bar"} data={data} xDomain={xDomain} />
</div>
xDomain
의 length
는 data
1차원 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain
요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n
으로 표시됩니다.
zDomain 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const zDomain = [ "Florida" ];
<div>
<Bar id={"bar"} data={data} zDomain={zDomain} />
</div>
zDomain
의 length
는 반드시 data
의 1차원 배열 수와 같아야합니다. 만약 그래프의 수가 위처럼 하나라면 zDomain
역시 하나여야합니다. 이보다 많거나 적다면 기본값인 Series n
으로 표시됩니다.
label 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const label = "강우확률(%)";
<div>
<Bar id={"bar"} data={data} label={label} />
</div>
width, height의 사용
<div>
<Bar id={"bar"} data={data} width={"360px"} height={"400px"} />
</div>
width
와 height
에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%
로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.
Import
import { Line } from "acryl-bias-chart";
Props
Name | Type | Default | Description |
---|---|---|---|
data | number[][] | 그래프를 나타내는데 사용될 데이터 | |
id | string | undefined | 차트의 id |
xDomain | string[] | undefined | x축의 이름 |
zDomain | string[] | undefined | 데이터 그룹의 이름 |
width | string | '100%' | 차트의 너비 |
height | string | '100%' | 차트의 높이 |
label | string | undefined | y축의 라벨 |
Single Graph
const data = [
[59, 84, 78, 63, 87, 89]
];
<div>
<Line id={"line"} data={data} />
</div>
id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.
Multiple Graph
const data = [
[59, 84, 78, 63, 87, 89],
[66, 16, 60, 30, 130, 62],
];
<div>
<Line id={"line"} data={data} />
</div>
xDomain 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
<div>
<Line id={"line"} data={data} xDomain={xDomain} />
</div>
xDomain
의 length
는 data
1차원 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain
요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n
으로 표시됩니다.
zDomain 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const zDomain = [ "Florida" ];
<div>
<Line id={"line"} data={data} zDomain={zDomain} />
</div>
zDomain
의 length
는 반드시 data
의 1차원 배열 수와 같아야합니다. 만약 그래프의 수가 위처럼 하나라면 zDomain
역시 하나여야합니다. 이보다 많거나 적다면 기본값인 Series n
으로 표시됩니다.
label 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const label = "강우확률(%)";
<div>
<Line id={"line"} data={data} label={label} />
</div>
width, height의 사용
<div>
<Line id={"line"} data={data} width={"360px"} height={"400px"} />
</div>
width
와 height
에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%
로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.
Import
import { Pie } from "acryl-bias-chart";
Props
Name | Type | Default | Description |
---|---|---|---|
data | number[] | 그래프를 나타내는데 사용될 데이터 | |
id | string | undefined | 차트의 id |
xDomain | string[] | undefined | x축의 이름 |
width | string | '100%' | 차트의 너비 |
height | string | '100%' | 차트의 높이 |
label | string | undefined | y축의 라벨 |
Single Graph
const data = [
59, 84, 78, 63, 87, 89
];
<div>
<Pie id={"pie"} data={data} />
</div>
id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.
xDomain 사용
const data = [
59, 84, 78, 63, 87, 89
];
const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
<div>
<Pie id={"pie"} data={data} xDomain={xDomain} />
</div>
xDomain
의 length
는 data
배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain
요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n
으로 표시됩니다.
label 사용
const data = [
59, 84, 78, 63, 87, 89
];
const label = "강우확률(%)";
<div>
<Pie id={"pie"} data={data} label={label} />
</div>
width, height의 사용
<div>
<Pie id={"pie"} data={data} width={"360px"} height={"400px"} />
</div>
width
와 height
에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%
로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.
Import
import { Spider } from "acryl-bias-chart";
Props
Name | Type | Default | Description |
---|---|---|---|
data | number[][] | 그래프를 나타내는데 사용될 데이터 | |
id | string | undefined | 차트의 id |
xDomain | string[] | undefined | x축의 이름 |
zDomain | string[] | undefined | 데이터 그룹의 이름 |
width | string | '100%' | 차트의 너비 |
height | string | '100%' | 차트의 높이 |
label | string | undefined | y축의 라벨 |
Single Graph
const data = [
[59, 84, 78, 63, 87, 89]
];
<div>
<Spider id={"spider"} data={data} />
</div>
id는 기본값으로 임의의 문자열 6자가 지정됩니다. 다만 같은 종류의 컴포넌트를 둘 이상 사용할 때는 사용할 것을 권고드립니다.
Multiple Graph
const data = [
[59, 84, 78, 63, 87, 89],
[66, 16, 60, 30, 130, 62],
];
<div>
<Spider id={"spider"} data={data} />
</div>
xDomain 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const xDomain = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ];
<div>
<Spider id={"spider"} data={data} xDomain={xDomain} />
</div>
xDomain
의 length
는 data
1차원 배열의 요소의 수와 같아야합니다. 만약 요소의 수가 위처럼 6개라면 xDomain
요소의 수 역시 6개로 동일해야합니다. 이보다 많거나 적다면 기본값인 요소의 인덱스 값인 n
으로 표시됩니다.
zDomain 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const zDomain = [ "Florida" ];
<div>
<Spider id={"spider"} data={data} zDomain={zDomain} />
</div>
zDomain
의 length
는 반드시 data
의 1차원 배열 수와 같아야합니다. 만약 그래프의 수가 위처럼 하나라면 zDomain
역시 하나여야합니다. 이보다 많거나 적다면 기본값인 Series n
으로 표시됩니다.
label 사용
const data = [
[59, 84, 78, 63, 87, 89]
];
const label = "강우확률(%)";
<div>
<Spider id={"spider"} data={data} label={label} />
</div>
width, height의 사용
<div>
<Spider id={"spider"} data={data} width={"360px"} height={"400px"} />
</div>
width
와 height
에 대한 직접적인 크기 조절은 권장하지 않습니다. 컴포넌트는 부모 태그의 크기에 맞도록 100%
로 설정되어있기 때문에, 부모 태그의 크기를 조절하여 사용할 것을 권고합니다.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago