C3: ์Šคํ”Œ๋ผ์ธ ์ฐจํŠธ ๊ทธ๋ฆฌ๊ธฐ๊ฐ€ ์ž˜๋ชป๋จ

์— ๋งŒ๋“  2016๋…„ 11์›” 15์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: c3js/c3

์Šคํ”Œ๋ผ์ธ ์ฐจํŠธ ์‹œ๋ฆฌ์ฆˆ์— ์‚ฐ๋ฐœ์ ์ธ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ์ž˜๋ชป ๊ทธ๋ ค์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘ ๋‚ ์งœ๊ฐ€ ์ฐจ๋ก€๋กœ ์žˆ์„ ๋•Œ ์„ ์ด ์ž์ฒด์ ์œผ๋กœ ๋ฐ˜๋ณต๋˜๊ฑฐ๋‚˜ ์„ ์ด ๋‹ค์Œ ๋ฐ์ดํ„ฐ ํฌ์ธํŠธ๋ฅผ ์ง€๋‚˜์ณ ๋‹ค์Œ ํฌ์ธํŠธ๋กœ ์ง์ ‘ ํœ˜์–ด์ง€๋Š” ๋Œ€์‹  ๋’ค๋กœ ํœ˜์–ด์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ธฐ ๋…ผ๋ฆฌ๊ฐ€ ์ž˜๋ชป๋œ ๊ฒƒ ๊ฐ™์•„์š”. ์ฐจํŠธ๋ฅผ "์„ " ๊ณ„์—ด๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ๋Œ€์‹  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

์ฐจํŠธ ์ฝ”๋“œ๋ฅผ ์˜ˆ์ œ ํŽ˜์ด์ง€์— ๋ณต์‚ฌํ•˜๋ฉด ๋‚ด ๋ฌธ์ œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (http://c3js.org/samples/chart_spline.html)

์ฐจํŠธ ์ฝ”๋“œ ์˜ˆ:
var ์ฐจํŠธ = c3.generate({
๋ฐ์ดํ„ฐ: {
x: '๋‚ ์งœ',
์—ด: [
['๋‚ ์งœ',744336000000,752112000000,876096000000,882057600000,884304000000,88006069600000,8932032900000,8
['๊ฐ’',12.15,11.7,11.75,11.86,11.97,12.05,11.27,12.2,12.34,12.27]
],
์œ ํ˜•: '์Šคํ”Œ๋ผ์ธ'
}
});

์Šคํฌ๋ฆฐ์ƒท:
image

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

c3.js ๋ฒ„์ „ 0.5.1์—์„œ๋Š” spline: { interpolation: { type: 'monotone' } } ์˜ต์…˜์ด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์ฐธ์กฐ: https://jsfiddle.net/mkw4h54r/10/

2018-03-25 15 56 34

๋ชจ๋“  3 ๋Œ“๊ธ€

๋ฌธ์ œ #1501์€ ์ด ๋ฌธ์ œ์™€ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

d3์˜ ์ผ๋ถ€ ๋ฒ„๊ทธ๋กœ ์ธํ•ด: https://github.com/d3/d3/issues/2348

d3 v4.0์—์„œ ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค(๋ณด๊ฐ„๊ธฐ๋Š” ๋‹ฌ์ฝคํ•œ Catmull-Rom ์Šคํ”Œ๋ผ์ธ ์ถ”๊ฐ€๋ฅผ ํฌํ•จํ•˜์—ฌ ๋‹ค์‹œ ์ž‘์„ฑ๋จ ). ๊ทธ๋Ÿฌ๋‚˜ c3์ด ์–ธ์ œ ๋”ฐ๋ผ์žก์„์ง€๋Š” ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค(https://github.com/c3js/c3/issues/1648).

c3.js ๋ฒ„์ „ 0.5.1์—์„œ๋Š” spline: { interpolation: { type: 'monotone' } } ์˜ต์…˜์ด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์ฐธ์กฐ: https://jsfiddle.net/mkw4h54r/10/

2018-03-25 15 56 34

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰