Enviar pesquisa
Carregar
제2회 hello world 오픈세미나 hello world-raphael차트
•
14 gostaram
•
17,750 visualizações
NAVER D2
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 72
Baixar agora
Baixar para ler offline
Recomendados
D3.js workshop
D3.js workshop
Anton Katunin
제2회 hello world 오픈세미나 Web Audio API-가능성엿보기
제2회 hello world 오픈세미나 Web Audio API-가능성엿보기
NAVER D2
제2회 hello world 오픈세미나 collie html5-animationlibrary
제2회 hello world 오픈세미나 collie html5-animationlibrary
NAVER D2
Html5 performance
Html5 performance
yongwoo Jeon
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
Channy Yun
[Hello world 오픈세미나]공공정보와 네이버 오픈api
[Hello world 오픈세미나]공공정보와 네이버 오픈api
NAVER D2
[Hello world 오픈세미나]거인을 이용해 뻔뻔(fun fun)하게 돈 벌기
[Hello world 오픈세미나]거인을 이용해 뻔뻔(fun fun)하게 돈 벌기
NAVER D2
[Hello world 오픈세미나]소셜게임 a to z final
[Hello world 오픈세미나]소셜게임 a to z final
NAVER D2
Recomendados
D3.js workshop
D3.js workshop
Anton Katunin
제2회 hello world 오픈세미나 Web Audio API-가능성엿보기
제2회 hello world 오픈세미나 Web Audio API-가능성엿보기
NAVER D2
제2회 hello world 오픈세미나 collie html5-animationlibrary
제2회 hello world 오픈세미나 collie html5-animationlibrary
NAVER D2
Html5 performance
Html5 performance
yongwoo Jeon
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
공공 데이터 활용 방법론 - 오픈 API 기술 및 동향 (KRNET 2014)
Channy Yun
[Hello world 오픈세미나]공공정보와 네이버 오픈api
[Hello world 오픈세미나]공공정보와 네이버 오픈api
NAVER D2
[Hello world 오픈세미나]거인을 이용해 뻔뻔(fun fun)하게 돈 벌기
[Hello world 오픈세미나]거인을 이용해 뻔뻔(fun fun)하게 돈 벌기
NAVER D2
[Hello world 오픈세미나]소셜게임 a to z final
[Hello world 오픈세미나]소셜게임 a to z final
NAVER D2
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
Davidson Fellipe
Raphael.js
Raphael.js
Mohd Saeed
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth Review
Arvind Krishnaa
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
Sara Soueidan
Easy charting with
Easy charting with
Major Ye
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
SVG Certification
SVG Certification
Vskills
Learn svg
Learn svg
FitBlar Mit
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Phil Reither
Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
Arvind Krishnaa
Html5 with Vaadin and Scala
Html5 with Vaadin and Scala
Joonas Lehtinen
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCamp
Donna Benjamin
Next generation Graphics: SVG
Next generation Graphics: SVG
David Corbacho Román
Desingning reusable web components
Desingning reusable web components
Joonas Lehtinen
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
Binary Studio
[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
NAVER D2
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
NAVER D2
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
NAVER D2
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
NAVER D2
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
NAVER D2
Mais conteúdo relacionado
Semelhante a 제2회 hello world 오픈세미나 hello world-raphael차트
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
Davidson Fellipe
Raphael.js
Raphael.js
Mohd Saeed
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth Review
Arvind Krishnaa
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
Sara Soueidan
Easy charting with
Easy charting with
Major Ye
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
SVG Certification
SVG Certification
Vskills
Learn svg
Learn svg
FitBlar Mit
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Phil Reither
Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
Arvind Krishnaa
Html5 with Vaadin and Scala
Html5 with Vaadin and Scala
Joonas Lehtinen
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCamp
Donna Benjamin
Next generation Graphics: SVG
Next generation Graphics: SVG
David Corbacho Román
Desingning reusable web components
Desingning reusable web components
Joonas Lehtinen
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
Binary Studio
Semelhante a 제2회 hello world 오픈세미나 hello world-raphael차트
(17)
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
웹데브모바일 3월 세미나 자료 : Raphael 로 손쉽게 그리는 웹벡터 그래픽
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
Raphael.js
Raphael.js
Canvas Based Presentation - Zeroth Review
Canvas Based Presentation - Zeroth Review
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
Easy charting with
Easy charting with
Web Vector Graphics
Web Vector Graphics
SVG Certification
SVG Certification
Learn svg
Learn svg
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Canvas Based Presentation tool - First Review
Canvas Based Presentation tool - First Review
Html5 with Vaadin and Scala
Html5 with Vaadin and Scala
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCamp
Next generation Graphics: SVG
Next generation Graphics: SVG
Desingning reusable web components
Desingning reusable web components
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
Mais de NAVER D2
[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
NAVER D2
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
NAVER D2
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
NAVER D2
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
NAVER D2
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
NAVER D2
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
NAVER D2
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
NAVER D2
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
NAVER D2
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
NAVER D2
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
NAVER D2
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
NAVER D2
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
NAVER D2
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
NAVER D2
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
NAVER D2
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
NAVER D2
[213] Fashion Visual Search
[213] Fashion Visual Search
NAVER D2
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
NAVER D2
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
NAVER D2
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
NAVER D2
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
NAVER D2
Mais de NAVER D2
(20)
[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[213] Fashion Visual Search
[213] Fashion Visual Search
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
제2회 hello world 오픈세미나 hello world-raphael차트
1.
Raphael.js로
2.
SVG
3.
차트
4.
만들기
5.
포털
6.
Ajax팀
7.
안오균
8.
9.
오늘은,
10.
11.
12.
13.
14.
15.
16.
자바스크립트로
17.
18.
19.
20.
차트를
21.
만들고,
22.
다듬었던
23.
이야기.
24.
25.
26.
27.
느꼈던
28.
것들.
29.
30.
만들기
31.
32.
왜
33.
있는
34.
걸
35.
쓰지
36.
않고
37.
새로
38.
만들었나?
39.
왜
40.
SVG를
41.
선택했나?
42.
왜
43.
Raphael.js를
44.
선택했나?
45.
46.
Naver
47.
Analytics
48.
49.
하지만,
50.
차트
51.
개발은
52.
처음이었어요...
53.
54.
굳이
55.
새로
56.
개발해야
57.
할까?
58.
이미
59.
좋은
60.
자바스크립트
61.
차트
62.
많잖아?
63.
64.
amCharts
65.
드래그로
66.
줌
67.
인/아웃!
68.
69.
HighCharts
70.
인쇄까지!
71.
72.
디자인!
73.
74.
개발
75.
프로세스
76.
상위기획
77.
78.
79.
80.
81.
82.
83.
84.
-
85.
상세기획
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
-
99.
디자인
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
-
118.
마크업
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
-
137.
자바스크립트
138.
개발
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
-
157.
서버
158.
개발
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
-
182.
QA
183.
184.
185.
상용
186.
차트는
187.
대부분의
188.
기능을
189.
훌륭하게
190.
제공.
191.
BUT,
192.
상세한
193.
디자인
194.
커스터마이징이
195.
어려움.
196.
197.
198.
199.
만들자!!
200.
201.
뭘로
202.
만들까?
203.
1.
204.
SVG
205.
or
206.
Canvas
207.
2.
208.
라이브러리를
209.
사용해야
210.
할까?
211.
212.
213.
214.
215.
아님
216.
새로
217.
만들까?
218.
219.
Scalable
220.
Vector
221.
Graphics
2차원
222.
벡터
223.
그래픽
224.
XML
225.
마크업
226.
언어
227.
228.
SVG가
229.
새로운
230.
건가?
231.
어디에
232.
쓰였던
233.
거지?
234.
이거!
235.
236.
SVG
237.
vs
238.
Canvas
239.
240.
SVG
241.
Canvas
242.
벡터
243.
방식
244.
비트맵
245.
방식
246.
선언전
247.
마크업
248.
DOM
249.
트리와
250.
무관
251.
각
252.
요소는
253.
DOM
254.
노드
255.
이벤트
256.
핸들링이
257.
어려움
258.
이벤트
259.
핸들링
260.
유리
261.
262.
263.
SVG
264.
vs
265.
Canvas
266.
(성능)
267.
268.
SVG
269.
Canvas
270.
객체
271.
수가
272.
많아질수록
273.
객체
274.
수가
275.
많아도
276.
성능
277.
저하
278.
영향
279.
없음
280.
렌더링
281.
영역이
282.
클
283.
수록
284.
해상도
285.
영향
286.
없음
287.
성능
288.
저하
289.
중간
290.
수준
291.
이하의
292.
그래픽,
293.
게임
294.
그래픽,
295.
이미지
296.
편집기
297.
애니메이션
298.
299.
SVG
300.
vs
301.
Canvas
302.
(지원범위)
303.
304.
SVG
305.
Canvas
306.
IE9+,
307.
Android
308.
3.0+,
309.
IE9+,
310.
Android
311.
2.1+,
312.
그
313.
외
314.
모던브라우저
315.
그
316.
외
317.
모던브라우저
318.
http://caniuse.com/#search=svg
319.
320.
크로스
321.
브라우징은
322.
어떻게
323.
지원하나?
324.
IE8
325.
이하에서는:
326.
327.
328.
-
329.
SVG
330.
to
331.
Flash
332.
(svgweb)
333.
334.
335.
-
336.
SVG
337.
to
338.
VML
339.
(raphael.js)
340.
341.
342.
-
343.
Canvas
344.
to
345.
VML
346.
(excanvas)
347.
348.
Android
349.
2.x
350.
에서는:
351.
352.
353.
354.
-
355.
SVG
356.
to
357.
Canvas
358.
(canvg.js,
359.
Fabric.js)
360.
361.
SVG로
362.
결정!
363.
-
364.
복잡하지
365.
않은
366.
그래픽.
367.
-
368.
툴팁
369.
인터렉션
370.
필요
371.
-
372.
서비스의
373.
타겟이
374.
주로
375.
데스크탑
376.
-
377.
IE8
378.
이하
379.
크로스
380.
브라우징
381.
지원
382.
-
383.
아이패드,
384.
갤럭시탭
385.
등
386.
태블릿
387.
지원(Android
388.
3.0+)
389.
390.
Raphael.js
391.
오픈소스
392.
SVG
393.
라이브러리
394.
IE에서는
395.
VML로
396.
표현
397.
친숙한
398.
API
399.
잘
400.
정리된
401.
문서
402.
메서드
403.
확장이
404.
쉬움
405.
github에서
406.
코드
407.
호스팅
408.
409.
원
410.
그리기
411.
var
412.
paper
413.
=
414.
Raphael(0,
415.
0,
416.
200,
417.
200);
418.
var
419.
circle
420.
=
421.
paper.circle(100,
422.
100,
423.
50);
424.
circle.attr({
425.
426.
427.
428.
429.
'fill':
430.
'#00f',
431.
432.
433.
434.
435.
'stroke':
436.
'#000',
437.
438.
439.
440.
441.
'stroke-width':
442.
5
443.
});
444.
445.
446.
원
447.
그리기
448.
(svg)
449.
svg
450.
version=1.1
451.
...
452.
453.
454.
455.
456.
457.
...
458.
459.
460.
461.
462.
circle
463.
cx=100
464.
cy=100
465.
r=50
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.
479.
480.
481.
482.
fill=#03f
483.
stroke=#000
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.
496.
497.
498.
499.
500.
stroke-width=5/circle
501.
/svg
502.
503.
504.
이런
505.
것까지!!
506.
507.
이벤트
508.
바인딩
509.
및
510.
애니메이션
511.
circle.click(
512.
function
513.
()
514.
{
515.
516.
517.
518.
519.
...
520.
}
521.
);
522.
523.
circle.animate(
524.
{
525.
526.
527.
528.
529.
'fill':
530.
'orange',
531.
532.
533.
534.
535.
'stroke':
536.
'red'
537.
},
538.
500,
539.
'ease-in'
540.
);
541.
542.
543.
한
544.
땀
545.
한
546.
땀
547.
그려나가기
548.
시작했습니다...
549.
하지만...
550.
551.
552.
다듬기
553.
554.
어떤
555.
문제들이
556.
있었나?
557.
어떤
558.
해결책이
559.
있었고
560.
무엇을
561.
선택했나?
562.
어떻게
563.
개선했나?
564.
565.
1px
566.
테두리
567.
또렷하게
568.
그리기
569.
-
570.
문제:
571.
572.
573.
1px
574.
테두리를
575.
가진
576.
막대를
577.
그리면
578.
579.
580.
테두리가
581.
뿌옇게
582.
보이는
583.
문제
584.
585.
-
586.
원인:
587.
588.
589.
테두리는
590.
픽셀을
591.
기준으로
592.
양쪽으로
593.
늘어나기
594.
때문
595.
(100,
596.
100)
597.
100px,
598.
100px
599.
위치에
600.
그린
601.
박스
602.
603.
(99.5,
604.
99.5)
605.
0.5px
606.
1px
607.
0.5px
608.
1px
609.
테두리를
610.
가진
611.
100px,
612.
100px
613.
위치에
614.
그린
615.
박스
616.
617.
(99,
618.
99)
619.
안티앨리어싱이
620.
적용된
621.
테두리
622.
부분
623.
1px
624.
테두리를
625.
가진
626.
100px,
627.
100px
628.
위치에
629.
그린
630.
박스
631.
632.
-
633.
해결:
634.
635.
636.
0.5픽셀
637.
이동해서
638.
그리기
639.
(100,
640.
100)
641.
(100.5,
642.
100.5)
643.
1px
644.
테두리를
645.
가진
646.
100.5px,
647.
100.5px
648.
위치에
649.
그린
650.
박스
651.
652.
라파엘의
653.
커스텀
654.
메서드를
655.
이용
656.
Raphael.fn.n_1pxBorderRect
657.
=
658.
function
659.
(x,
660.
y,
661.
w,
662.
h)
663.
{
664.
665.
666.
667.
668.
return
669.
this.rect(x+0.5,
670.
y+0.5,
671.
w-1,
672.
h-1);
673.
};
674.
675.
var
676.
rect
677.
=
678.
paper.n_1pxBorderRect(x,
679.
y,
680.
w,
681.
h);
682.
683.
684.
아름다운
685.
투명
686.
그라데이션
687.
구현하기
688.
디자이너가
689.
생각한
690.
그라데이션
691.
개발자가
692.
만들어온
693.
그라데이션
694.
695.
-
696.
원인:
697.
698.
699.
Raphael에서는
700.
마지막
701.
그래디언트
702.
스탑에만
703.
704.
705.
투명도를
706.
적용할
707.
수
708.
있음
709.
첫
710.
번째
711.
그래디언트
712.
스탑에는
713.
투명도
714.
적용
715.
안됨
716.
717.
718.
-
719.
해결:
720.
721.
722.
다른
723.
그래디언트
724.
스탑에도
725.
투명도를
726.
줄
727.
수
728.
있도록
729.
730.
731.
코드
732.
수정했으나
733.
컨펌
734.
안됨
735.
736.
737.
738.
739.
740.
그라데이션
741.
적용을
742.
위해
743.
744.
745.
별도의
746.
이미지를
747.
사용함
748.
749.
툴팁
750.
구현하기
751.
-
752.
문제:
753.
754.
755.
차트
756.
영역을
757.
벗어나는
758.
툴팁이
759.
있음
760.
툴팁이
761.
주황색
762.
차트
763.
영역을
764.
벗어남
765.
766.
-
767.
해결:
768.
769.
770.
영역에
771.
맞춰
772.
툴팁의
773.
위치를
774.
바꿨으나
775.
776.
777.
툴팁에
778.
표현할
779.
값이
780.
아주
781.
큰
782.
경우가
783.
있어
784.
재수정
785.
786.
787.
툴팁은
788.
마크업으로
789.
구현함
790.
이
791.
툴팁은
792.
div
793.
엘리먼트
794.
795.
성능
796.
개선
797.
사례
798.
-
799.
문제:
800.
801.
802.
스택형
803.
막대차트에
804.
3개월
805.
치
806.
데이터
807.
표시
808.
요청
809.
810.
811.
한
812.
페이지에
813.
5개의
814.
차트를
815.
표현할
816.
수
817.
있도록
818.
요청
819.
820.
각각
821.
하나의
822.
Rect
823.
노드
824.
막대를
825.
그리는
826.
데
827.
필요한
828.
노드의
829.
개수
830.
831.
=
832.
막대
833.
하나
834.
당
835.
총
836.
4개의
837.
Rect
838.
노드
839.
840.
841.
842.
843.
x
844.
한
845.
차트에
846.
91개의
847.
막대
848.
849.
850.
851.
852.
x
853.
한
854.
페이지에
855.
총
856.
5개의
857.
차트
858.
859.
=
860.
4
861.
x
862.
91
863.
x
864.
5
865.
=
866.
1820개의
867.
노드
868.
869.
-
870.
해결:
871.
872.
873.
각각의
874.
Rect로
875.
되어있던
876.
스택을
877.
한
878.
개의
879.
Path로
880.
그림
881.
같은
882.
색의
883.
막대는
884.
한
885.
개의
886.
Path
887.
노드
888.
889.
890.
Path
891.
시작점
892.
Path
893.
끝점
894.
같은
895.
컬러의
896.
막대를
897.
한
898.
개의
899.
Path
900.
노드로!
901.
컬러별로
902.
각각
903.
하나의
904.
Path
905.
노드
906.
막대의
907.
개수가
908.
많아져도
909.
성능에
910.
큰
911.
영향
912.
없음
913.
914.
IE에서의
915.
텍스트
916.
안티앨리어싱
917.
-
918.
문제:
919.
920.
921.
IE8
922.
이하,
923.
VML로
924.
표현할
925.
때
926.
텍스트가
927.
뭉개져
928.
보임
929.
VML
930.
SVG
931.
932.
-
933.
원인:
934.
935.
936.
Raphael은
937.
VML로
938.
텍스트를
939.
표현할
940.
때,
941.
942.
943.
VML의
944.
TextPath
945.
노드를
946.
사용함.
947.
948.
949.
950.
TextPath
951.
노드는
952.
변형이
953.
쉽지만,
954.
955.
956.
작은
957.
폰트일
958.
경우
959.
안티앨리어싱
960.
때문에
961.
뭉개져보임.
962.
963.
964.
965.
966.
-
967.
해결:
968.
969.
970.
안티앨리어싱
971.
제거하면
972.
글자가
973.
깨짐.
974.
975.
976.
라이브러리를
977.
수정
978.
시도했으나
979.
비효율적임.
980.
981.
982.
983.
디자인측과
984.
협의해
985.
그대로
986.
유지하기로
987.
함.
988.
989.
-
990.
대안:
991.
992.
993.
텍스트를
994.
마크업으로
995.
구현하는
996.
방법.
997.
차트의
998.
텍스트는
999.
모두
1000.
div
1001.
엘리먼트
1002.
1003.
-
1004.
대안:
1005.
1006.
1007.
축
1008.
레이블에
1009.
변함이
1010.
없다면
1011.
고정
1012.
이미지를
1013.
사용함.
1014.
차트의
1015.
배경은
1016.
이미지~!
1017.
1018.
차트를
1019.
재사용할
1020.
수
1021.
있을까?
1022.
서비스마다
1023.
차트의
1024.
형태와
1025.
디자인이
1026.
다름
1027.
원하는
1028.
인터랙션이
1029.
다름
1030.
차트를
1031.
보여주려는
1032.
디바이스가
1033.
다름
1034.
서비스별로
1035.
데이터셋이
1036.
다름
1037.
1038.
1039.
모든
1040.
서비스를
1041.
만족시킬
1042.
수는
1043.
없음!
1044.
1045.
그럼
1046.
어디까지
1047.
재사용할
1048.
수
1049.
있을까?
1050.
차트의
1051.
큼직한
1052.
형태는
1053.
같음
1054.
1055.
1056.
1057.
1058.
'데이터'로
1059.
차트를
1060.
뿌린다는
1061.
건
1062.
같음
1063.
1064.
그럼
1065.
어디까지
1066.
재사용할
1067.
수
1068.
있을까?
1069.
차트의
1070.
큼직한
1071.
형태는
1072.
같음
1073.
1074.
1075.
1076.
-
1077.
바차트와
1078.
라인차트는
1079.
형태가
1080.
동일
1081.
1082.
1083.
1084.
-
1085.
파이차트나
1086.
도넛차트도
1087.
같은
1088.
형태
1089.
1090.
1091.
1092.
-
1093.
틱
1094.
계산이나
1095.
좌표,
1096.
각도
1097.
계산은
1098.
공유할
1099.
수
1100.
있음
1101.
1102.
'데이터'로
1103.
차트를
1104.
뿌린다는
1105.
건
1106.
같음
1107.
1108.
1109.
1110.
-
1111.
차트
1112.
모듈과
1113.
데이터
1114.
모듈을
1115.
분리
1116.
1117.
라인차트와
1118.
바차트
1119.
차트
1120.
디자인이
1121.
어떻든
1122.
점이
1123.
그려지는
1124.
영역은
1125.
동일
1126.
1127.
라인차트와
1128.
바차트
1129.
(x,
1130.
y)
1131.
1132.
라인차트와
1133.
바차트
1134.
1135.
라인차트와
1136.
바차트
1137.
1138.
라인차트와
1139.
바차트
1140.
1141.
좌표
1142.
계산,
1143.
그리는
1144.
역할,
1145.
데이터
1146.
처리를
1147.
각각
1148.
분리하자!
1149.
1150.
차트
1151.
구조
1152.
Brush
1153.
1154.
+
1155.
drawBaseline()
1156.
Chart
1157.
1158.
+
1159.
drawEachGrid()
1160.
1161.
+
1162.
drawEachPoint()
1163.
1164.
-
1165.
Brush
1166.
1167.
-
1168.
DataTable
1169.
1170.
+
1171.
draw()
1172.
DataTable
1173.
1174.
+
1175.
setData()
1176.
1177.
그리기
1178.
Brush
1179.
좌표
1180.
계산
1181.
1182.
+
1183.
drawBaseline()
1184.
Chart
1185.
1186.
+
1187.
drawEachGrid()
1188.
1189.
+
1190.
drawEachPoint()
1191.
1192.
-
1193.
Brush
1194.
1195.
-
1196.
DataTable
1197.
1198.
+
1199.
draw()
1200.
DataTable
1201.
1202.
+
1203.
setData()
1204.
데이터
1205.
처리
1206.
1207.
차트
1208.
구조:
1209.
DataTable
1210.
모든
1211.
차트는
1212.
같은
1213.
형태의
1214.
데이터를
1215.
사용함
1216.
엑셀
1217.
형태로
1218.
데이터
1219.
정의
1220.
1221.
1222.
1223.
1224.
[
1225.
1226.
1227.
Baixar agora