Raphael.js로 SVG 차트 만들기

8,941 views
8,385 views

Published on

2012.07.07 제2회 Helloworld 세미나 발표자료.

5 Comments
25 Likes
Statistics
Notes
  • 좋은자료 !! 차트만드는데 도움 많이 됬어요.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 감사히 잘 보고 갑니다 :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 와.. 2년전 자료군요..
    ㅎㅎㅎ svg를 공부하다가 알게되서 보고 가요
    잘보았습니다.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • js차트쪽 작업을 해야하는데 IE때문에 raphael을 써야할 듯 싶어 검색해 보니 이런 자료가 나오네요. 1년도 넘은 자료인데 유익하게 봤습니다. 감사합니다..^^
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 이번에 차트를 사용한 시각화 프로젝트를 진행했는데 비슷한 문제를 겪었습니다. ㅎㅎ 벌써 1년도 지난 PPT지만 느끼는 점이 많네요. PPT내용의 브러시에 대한 개념을 어느정도 통합 하려면, 기반이 되는 데이터 형태에 주목해야 될거 같습니다. 예를들어 Bar차트와 Stacked Bar차트는, 형태는 같지만 보여주는 데이터셋이 단수일 경우와 복수일 경우라는 차이가 있습니다, 이런 식으로 단일 컬럼일 경우(Bar, Pie, Line), 복수 컬럼일 경우(Stacked Bar, Multiple Line)로 브러시의 입력 타입을 일반화하면, 어느정도는 통일성 있는 차트가 나오지 않을 까 싶습니다. 실제로 저는 40여가지 차트를 구현하였지만, 구현 타입은 Tabular, Multiple Tabular, Tree 정도의 구분으로 차트를 구현한거 같네요.ㅎㅎ 그리고 사용 라이브러리는 D3.js를 썻습니다. 제가 겪었던 문제들이나.. PPT에 나왔던 고충들중 어느정도를 수렴하고 있는 형태의 Library라고 생각합니다.

    차트라는 테마와는 별개로 PPT의 기승전결 구성에서 정말 감동을 느꼈습니다! 잘보았습니다~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,941
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
87
Comments
5
Likes
25
Embeds 0
No embeds

No notes for slide

Raphael.js로 SVG 차트 만들기

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

×