Raphael.js로 SVG 차트 만들기
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Raphael.js로 SVG 차트 만들기

on

  • 6,292 views

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

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

Statistics

Views

Total Views
6,292
Views on SlideShare
6,291
Embed Views
1

Actions

Likes
18
Downloads
55
Comments
4

1 Embed 1

http://192.168.1.120 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    차트라는 테마와는 별개로 PPT의 기승전결 구성에서 정말 감동을 느꼈습니다! 잘보았습니다~
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Raphael.js로 SVG 차트 만들기 Presentation Transcript

  • 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.   ->
  • 183.   QA
  • 184.    
  • 185.   
  • 186. 상용
  • 187.   차트는
  • 188.   대부분의
  • 189.   기능을
  • 190.   훌륭하게
  • 191.   제공.
  • 192.   BUT,
  • 193.   상세한
  • 194.   디자인
  • 195.   커스터마이징이
  • 196.   어려움.
  • 197.    
  • 198.    
  • 199.    
  • 200.    만들자!!
  • 201.   
  • 202. 뭘로
  • 203.   만들까?
  • 204.    1.
  • 205.   SVG
  • 206.   or
  • 207.   Canvas
  • 208.    2.
  • 209.   라이브러리를
  • 210.   사용해야
  • 211.   할까?
  • 212.    
  • 213.   
  • 214.   
  • 215.   
  • 216.   아님
  • 217.   새로
  • 218.   만들까?
  • 219.   
  • 220. Scalable
  • 221.   Vector
  • 222.   Graphics 2차원
  • 223.   벡터
  • 224.   그래픽
  • 225.    XML
  • 226.   마크업
  • 227.   언어
  • 228.   
  • 229. SVG가
  • 230.   새로운
  • 231.   건가?
  • 232.   어디에
  • 233.   쓰였던
  • 234.   거지?
  • 235.    이거!
  • 236.   
  • 237. SVG
  • 238.   vs
  • 239.   Canvas
  • 240.   
  • 241.    SVG
  • 242.    Canvas
  • 243.    벡터
  • 244.   방식
  • 245.    비트맵
  • 246.   방식
  • 247.    선언전
  • 248.   마크업
  • 249.    DOM
  • 250.   트리와
  • 251.   무관
  • 252.    각
  • 253.   요소는
  • 254.   DOM
  • 255.   노드
  • 256.    이벤트
  • 257.   핸들링이
  • 258.   어려움
  • 259.    이벤트
  • 260.   핸들링
  • 261.   유리
  • 262.   
  • 263.   
  • 264. SVG
  • 265.   vs
  • 266.   Canvas
  • 267.   (성능)
  • 268.   
  • 269.    SVG
  • 270.    Canvas
  • 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.   
  • 300. SVG
  • 301.   vs
  • 302.   Canvas
  • 303.   (지원범위)
  • 304.   
  • 305.    SVG
  • 306.    Canvas
  • 307.    IE9+,
  • 308.   Android
  • 309.   3.0+,
  • 310.    IE9+,
  • 311.   Android
  • 312.   2.1+,
  • 313.    그
  • 314.   외
  • 315.   모던브라우저
  • 316.    그
  • 317.   외
  • 318.   모던브라우저
  • 319.    http://caniuse.com/#search=svg
  • 320.   
  • 321. 크로스
  • 322.   브라우징은
  • 323.   어떻게
  • 324.   지원하나?
  • 325.    IE8
  • 326.   이하에서는:
  • 327.    
  • 328.   
  • 329.   -
  • 330.   SVG
  • 331.   to
  • 332.   Flash
  • 333.   (svgweb)
  • 334.    
  • 335.   
  • 336.   -
  • 337.   SVG
  • 338.   to
  • 339.   VML
  • 340.   (raphael.js)
  • 341.    
  • 342.   
  • 343.   -
  • 344.   Canvas
  • 345.   to
  • 346.   VML
  • 347.   (excanvas)
  • 348.    
  • 349.    Android
  • 350.   2.x
  • 351.   에서는:
  • 352.   
  • 353.    
  • 354.   
  • 355.   -
  • 356.   SVG
  • 357.   to
  • 358.   Canvas
  • 359.   (canvg.js,
  • 360.   Fabric.js)
  • 361.   
  • 362. SVG로
  • 363.   결정!
  • 364.   -
  • 365.   복잡하지
  • 366.   않은
  • 367.   그래픽.
  • 368.   -
  • 369.   툴팁
  • 370.   인터렉션
  • 371.   필요
  • 372.   -
  • 373.   서비스의
  • 374.   타겟이
  • 375.   주로
  • 376.   데스크탑
  • 377.   -
  • 378.   IE8
  • 379.   이하
  • 380.   크로스
  • 381.   브라우징
  • 382.   지원
  • 383.   -
  • 384.   아이패드,
  • 385.   갤럭시탭
  • 386.   등
  • 387.   태블릿
  • 388.   지원(Android
  • 389.   3.0+)
  • 390.   
  • 391. Raphael.js
  • 392.    오픈소스
  • 393.   SVG
  • 394.   라이브러리
  • 395.    IE에서는
  • 396.   VML로
  • 397.   표현
  • 398.    친숙한
  • 399.   API
  • 400.    잘
  • 401.   정리된
  • 402.   문서
  • 403.    메서드
  • 404.   확장이
  • 405.   쉬움
  • 406.    github에서
  • 407.   코드
  • 408.   호스팅
  • 409.   
  • 410. 원
  • 411.   그리기
  • 412.    var
  • 413.   paper
  • 414.   =
  • 415.   Raphael(0,
  • 416.   0,
  • 417.   200,
  • 418.   200);
  • 419.    var
  • 420.   circle
  • 421.   =
  • 422.   paper.circle(100,
  • 423.   100,
  • 424.   50);
  • 425.    circle.attr({
  • 426.    
  • 427.   
  • 428.   
  • 429.   
  • 430.   fill:
  • 431.   #00f,
  • 432.    
  • 433.   
  • 434.   
  • 435.   
  • 436.   stroke:
  • 437.   #000,
  • 438.    
  • 439.   
  • 440.   
  • 441.   
  • 442.   stroke-width:
  • 443.   5
  • 444.    });
  • 445.    
  • 446.   
  • 447. 원
  • 448.   그리기
  • 449.   (svg)
  • 450.    <svg
  • 451.   version="1.1"
  • 452.   ...
  • 453.   >
  • 454.    
  • 455.   
  • 456.   
  • 457.   
  • 458.   ...
  • 459.    
  • 460.   
  • 461.   
  • 462.   
  • 463.   <circle
  • 464.   cx="100"
  • 465.   cy="100"
  • 466.   r="50"
  • 467.    
  • 468.   
  • 469.   
  • 470.   
  • 471.   
  • 472.   
  • 473.   
  • 474.   
  • 475.   
  • 476.   
  • 477.   
  • 478.   
  • 479.   
  • 480.   
  • 481.   
  • 482.   
  • 483.   fill="#03f"
  • 484.   stroke="#000"
  • 485.    
  • 486.   
  • 487.   
  • 488.   
  • 489.   
  • 490.   
  • 491.   
  • 492.   
  • 493.   
  • 494.   
  • 495.   
  • 496.   
  • 497.   
  • 498.   
  • 499.   
  • 500.   
  • 501.   stroke-width="5"></circle>
  • 502.    </svg>
  • 503.    
  • 504.   
  • 505. 이런
  • 506.   것까지!!
  • 507.   
  • 508. 이벤트
  • 509.   바인딩
  • 510.   및
  • 511.   애니메이션
  • 512.    circle.click(
  • 513.   function
  • 514.   ()
  • 515.   {
  • 516.    
  • 517.   
  • 518.   
  • 519.   
  • 520.   ...
  • 521.    }
  • 522.   );
  • 523.    
  • 524.    circle.animate(
  • 525.   {
  • 526.    
  • 527.   
  • 528.   
  • 529.   
  • 530.   fill:
  • 531.   orange,
  • 532.    
  • 533.   
  • 534.   
  • 535.   
  • 536.   stroke:
  • 537.   red
  • 538.    },
  • 539.   500,
  • 540.   ease-in
  • 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.   
  • 566. 1px
  • 567.   테두리
  • 568.   또렷하게
  • 569.   그리기
  • 570.    -
  • 571.   문제:
  • 572.    
  • 573.   
  • 574.   1px
  • 575.   테두리를
  • 576.   가진
  • 577.   막대를
  • 578.   그리면
  • 579.    
  • 580.   
  • 581.   테두리가
  • 582.   뿌옇게
  • 583.   보이는
  • 584.   문제
  • 585.   
  • 586. -
  • 587.   원인:
  • 588.   
  • 589.   
  • 590.   테두리는
  • 591.   픽셀을
  • 592.   기준으로
  • 593.   양쪽으로
  • 594.   늘어나기
  • 595.   때문
  • 596.    (100,
  • 597.   100)
  • 598.    100px,
  • 599.   100px
  • 600.    위치에
  • 601.   그린
  • 602.   박스
  • 603.   
  • 604. (99.5,
  • 605.   99.5)
  • 606.    0.5px
  • 607.   1px
  • 608.    0.5px
  • 609.    1px
  • 610.   테두리를
  • 611.   가진
  • 612.    100px,
  • 613.   100px
  • 614.    위치에
  • 615.   그린
  • 616.   박스
  • 617.   
  • 618. (99,
  • 619.   99)
  • 620.    안티앨리어싱이
  • 621.   적용된
  • 622.   테두리
  • 623.   부분
  • 624.    1px
  • 625.   테두리를
  • 626.   가진
  • 627.    100px,
  • 628.   100px
  • 629.    위치에
  • 630.   그린
  • 631.   박스
  • 632.   
  • 633. -
  • 634.   해결:
  • 635.   
  • 636.   
  • 637.   0.5픽셀
  • 638.   이동해서
  • 639.   그리기
  • 640.    (100,
  • 641.   100)
  • 642.    (100.5,
  • 643.   100.5)
  • 644.    1px
  • 645.   테두리를
  • 646.   가진
  • 647.    100.5px,
  • 648.   100.5px
  • 649.    위치에
  • 650.   그린
  • 651.   박스
  • 652.   
  • 653. 라파엘의
  • 654.   커스텀
  • 655.   메서드를
  • 656.   이용
  • 657.   Raphael.fn.n_1pxBorderRect
  • 658.   =
  • 659.   function
  • 660.   (x,
  • 661.   y,
  • 662.   w,
  • 663.   h)
  • 664.   {
  • 665.   
  • 666.   
  • 667.   
  • 668.   
  • 669.   return
  • 670.   this.rect(x+0.5,
  • 671.   y+0.5,
  • 672.   w-1,
  • 673.   h-1);
  • 674.   };
  • 675.   
  • 676.   var
  • 677.   rect
  • 678.   =
  • 679.   paper.n_1pxBorderRect(x,
  • 680.   y,
  • 681.   w,
  • 682.   h);
  • 683.   
  • 684.   
  • 685. 아름다운
  • 686.   투명
  • 687.   그라데이션
  • 688.   구현하기
  • 689.    디자이너가
  • 690.   생각한
  • 691.   그라데이션
  • 692.    개발자가
  • 693.   만들어온
  • 694.   그라데이션
  • 695.   
  • 696. -
  • 697.   원인:
  • 698.    
  • 699.   
  • 700.   Raphael에서는
  • 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.   툴팁은
  • 793.   <div>
  • 794.   엘리먼트
  • 795.   
  • 796. 성능
  • 797.   개선
  • 798.   사례
  • 799.    -
  • 800.   문제:
  • 801.    
  • 802.   
  • 803.   스택형
  • 804.   막대차트에
  • 805.   3개월
  • 806.   치
  • 807.   데이터
  • 808.   표시
  • 809.   요청
  • 810.    
  • 811.   
  • 812.   한
  • 813.   페이지에
  • 814.   5개의
  • 815.   차트를
  • 816.   표현할
  • 817.   수
  • 818.   있도록
  • 819.   요청
  • 820.   
  • 821. 각각
  • 822.   하나의
  • 823.   Rect
  • 824.   노드
  • 825.   막대를
  • 826.   그리는
  • 827.   데
  • 828.   필요한
  • 829.   노드의
  • 830.   개수
  • 831.   
  • 832.   =
  • 833.   막대
  • 834.   하나
  • 835.   당
  • 836.   총
  • 837.   4개의
  • 838.   Rect
  • 839.   노드
  • 840.   
  • 841.   
  • 842.   
  • 843.   
  • 844.   x
  • 845.   한
  • 846.   차트에
  • 847.   91개의
  • 848.   막대
  • 849.   
  • 850.   
  • 851.   
  • 852.   
  • 853.   x
  • 854.   한
  • 855.   페이지에
  • 856.   총
  • 857.   5개의
  • 858.   차트
  • 859.   
  • 860.   =
  • 861.   4
  • 862.   x
  • 863.   91
  • 864.   x
  • 865.   5
  • 866.   =
  • 867.   1820개의
  • 868.   노드
  • 869.   
  • 870. -
  • 871.   해결:
  • 872.   
  • 873.   
  • 874.   각각의
  • 875.   Rect로
  • 876.   되어있던
  • 877.   스택을
  • 878.   한
  • 879.   개의
  • 880.   Path로
  • 881.   그림
  • 882.    같은
  • 883.   색의
  • 884.   막대는
  • 885.   한
  • 886.   개의
  • 887.   Path
  • 888.   노드
  • 889.   
  • 890.   
  • 891. Path
  • 892.   시작점
  • 893.    Path
  • 894.   끝점
  • 895.    같은
  • 896.   컬러의
  • 897.   막대를
  • 898.   한
  • 899.   개의
  • 900.   Path
  • 901.   노드로!
  • 902. 컬러별로
  • 903.   각각
  • 904.   하나의
  • 905.   Path
  • 906.   노드
  • 907.   막대의
  • 908.   개수가
  • 909.   많아져도
  • 910.   성능에
  • 911.   큰
  • 912.   영향
  • 913.   없음
  • 914.   
  • 915. IE에서의
  • 916.   텍스트
  • 917.   안티앨리어싱
  • 918.    -
  • 919.   문제:
  • 920.    
  • 921.   
  • 922.   IE8
  • 923.   이하,
  • 924.   VML로
  • 925.   표현할
  • 926.   때
  • 927.   텍스트가
  • 928.   뭉개져
  • 929.   보임
  • 930.    VML
  • 931.    SVG
  • 932.   
  • 933. -
  • 934.   원인:
  • 935.   
  • 936.   
  • 937.   Raphael은
  • 938.   VML로
  • 939.   텍스트를
  • 940.   표현할
  • 941.   때,
  • 942.   
  • 943.   
  • 944.   VML의
  • 945.   TextPath
  • 946.   노드를
  • 947.   사용함.
  • 948.   
  • 949.   
  • 950.   
  • 951.   TextPath
  • 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.   모두
  • 1001.    <div>
  • 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.   바차트
  • 1130.    (x,
  • 1131.   y)
  • 1132.   
  • 1133. 라인차트와
  • 1134.   바차트
  • 1135.   
  • 1136. 라인차트와
  • 1137.   바차트
  • 1138.   
  • 1139. 라인차트와
  • 1140.   바차트
  • 1141.   
  • 1142. 좌표
  • 1143.   계산,
  • 1144.   그리는
  • 1145.   역할,
  • 1146.   데이터
  • 1147.   처리를
  • 1148.   각각
  • 1149.   분리하자!
  • 1150.   
  • 1151. 차트
  • 1152.   구조
  • 1153.    Brush
  • 1154.    
  • 1155.   +
  • 1156.   drawBaseline()
  • 1157.    Chart
  • 1158.    
  • 1159.   +
  • 1160.   drawEachGrid()
  • 1161.    
  • 1162.   +
  • 1163.   drawEachPoint()
  • 1164.    
  • 1165.   -
  • 1166.   Brush
  • 1167.    
  • 1168.   -
  • 1169.   DataTable
  • 1170.    
  • 1171.   +
  • 1172.   draw()
  • 1173.    DataTable
  • 1174.    
  • 1175.   +
  • 1176.   setData()
  • 1177.   
  • 1178. 그리기
  • 1179.    Brush
  • 1180.   좌표
  • 1181.   계산
  • 1182.    
  • 1183.   +
  • 1184.   drawBaseline()
  • 1185.    Chart
  • 1186.    
  • 1187.   +
  • 1188.   drawEachGrid()
  • 1189.    
  • 1190.   +
  • 1191.   drawEachPoint()
  • 1192.   
  • 1193.   -
  • 1194.   Brush
  • 1195.   
  • 1196.   -
  • 1197.   DataTable
  • 1198.   
  • 1199.   +
  • 1200.   draw()
  • 1201.    DataTable
  • 1202.    
  • 1203.   +
  • 1204.   setData()
  • 1205.    데이터
  • 1206.   처리
  • 1207.   
  • 1208. 차트
  • 1209.   구조:
  • 1210.   DataTable
  • 1211.    모든
  • 1212.   차트는
  • 1213.   같은
  • 1214.   형태의
  • 1215.   데이터를
  • 1216.   사용함
  • 1217.    엑셀
  • 1218.   형태로
  • 1219.   데이터
  • 1220.   정의
  • 1221.    
  • 1222.    
  • 1223.    
  • 1224.   
  • 1225.   [
  • 1226.    
  • 1227.   
  • 1228.   
  • 1229.   
  • 1230.   
  • 1231.   
  • 1232.   [
  • 1233.   월/참석자,
  • 1234.   
  • 1235.   
  • 1236.   
  • 1237.   남,
  • 1238.   
  • 1239.   
  • 1240.   
  • 1241.   
  • 1242.   
  • 1243.   
  • 1244.   여
  • 1245.   ],
  • 1246.    
  • 1247.   
  • 1248.   
  • 1249.   
  • 1250.   
  • 1251.   
  • 1252.   [
  • 1253.   2012/06,
  • 1254.   
  • 1255.   
  • 1256.   
  • 1257.   165,
  • 1258.   
  • 1259.   
  • 1260.   
  • 1261.   
  • 1262.   
  • 1263.   
  • 1264.   938
  • 1265.   
  • 1266.   ],
  • 1267.    Row
  • 1268.    
  • 1269.   
  • 1270.   
  • 1271.   
  • 1272.   
  • 1273.   
  • 1274.   [
  • 1275.   2012/07,
  • 1276.   
  • 1277.   
  • 1278.   
  • 1279.   135,
  • 1280.   
  • 1281.   
  • 1282.   
  • 1283.   
  • 1284.   
  • 1285.   1120
  • 1286.   ]
  • 1287.    
  • 1288.   
  • 1289.   ]
  • 1290.    Column
  • 1291.   
  • 1292. 
  • 1293.   
  • 1294.   [
  • 1295.    
  • 1296.   
  • 1297.   
  • 1298.   
  • 1299.   
  • 1300.   
  • 1301.   [
  • 1302.   월/참석자,
  • 1303.   
  • 1304.   
  • 1305.   
  • 1306.   남,
  • 1307.   
  • 1308.   
  • 1309.   
  • 1310.   
  • 1311.   
  • 1312.   
  • 1313.   여
  • 1314.   ],
  • 1315.    
  • 1316.   
  • 1317.   
  • 1318.   
  • 1319.   
  • 1320.   
  • 1321.   [
  • 1322.   2012/06,
  • 1323.   
  • 1324.   
  • 1325.   
  • 1326.   165,
  • 1327.   
  • 1328.   
  • 1329.   
  • 1330.   
  • 1331.   
  • 1332.   
  • 1333.   938
  • 1334.   
  • 1335.   ],
  • 1336.    
  • 1337.   
  • 1338.   
  • 1339.   
  • 1340.   
  • 1341.   
  • 1342.   [
  • 1343.   2012/07,
  • 1344.   
  • 1345.   
  • 1346.   
  • 1347.   135,
  • 1348.   
  • 1349.   
  • 1350.   
  • 1351.   
  • 1352.   
  • 1353.   1120
  • 1354.   ]
  • 1355.    
  • 1356.   
  • 1357.   ]
  • 1358.   1.
  • 1359.   가독성
  • 1360.   좋음
  • 1361.   2.
  • 1362.   데이터를
  • 1363.   먼저
  • 1364.   정의,
  • 1365.   
  • 1366.   
  • 1367.   
  • 1368.   
  • 1369.   차트
  • 1370.   종류에
  • 1371.   관계
  • 1372.   없이
  • 1373.   데이터의
  • 1374.   기준을
  • 1375.   잡을
  • 1376.   수
  • 1377.   있음
  • 1378.   
  • 1379. 차트
  • 1380.   구조:
  • 1381.   Chart
  • 1382.   Core
  • 1383.    Chart
  • 1384.    LineBarChart
  • 1385.    TableChart
  • 1386.    PieChart
  • 1387.    StackBarChart
  • 1388.    데이터
  • 1389.   테이블로부터
  • 1390.   차트
  • 1391.   영역의
  • 1392.   좌표,
  • 1393.   각도,
  • 1394.   틱
  • 1395.   등을
  • 1396.   계산
  • 1397.    차트를
  • 1398.   그리는
  • 1399.   것에
  • 1400.   관여하지
  • 1401.   않음
  • 1402.   
  • 1403. 차트
  • 1404.   구조:
  • 1405.   Brush
  • 1406.    Brush
  • 1407.    LineBrush
  • 1408.    CanvasLineBrush
  • 1409.    BarBrush
  • 1410.    CurveLineBrush
  • 1411.    Chart에서
  • 1412.   전달해준
  • 1413.   좌표로
  • 1414.   그림을
  • 1415.   그리는
  • 1416.   역할
  • 1417.    그래픽
  • 1418.   라이브러리에
  • 1419.   대한
  • 1420.   제한
  • 1421.   없음
  • 1422.    이벤트
  • 1423.   처리
  • 1424.   등의
  • 1425.   작업도
  • 1426.   담당함
  • 1427.   
  • 1428. <라인
  • 1429.   브러시
  • 1430.   인터페이스>
  • 1431.   var
  • 1432.   LineBrush
  • 1433.   =
  • 1434.   {
  • 1435.   
  • 1436.   
  • 1437.   
  • 1438.   
  • 1439.   
  • 1440.   
  • 1441.   initialize:
  • 1442.   function
  • 1443.   (data)
  • 1444.   {},
  • 1445.   
  • 1446.   
  • 1447.   
  • 1448.   
  • 1449.   
  • 1450.   
  • 1451.   drawBaseline:
  • 1452.   function
  • 1453.   (data)
  • 1454.   {},
  • 1455.   
  • 1456.   
  • 1457.   
  • 1458.   
  • 1459.   
  • 1460.   
  • 1461.   drawEachGridline:
  • 1462.   function
  • 1463.   (data)
  • 1464.   {},
  • 1465.   
  • 1466.   
  • 1467.   
  • 1468.   
  • 1469.   
  • 1470.   
  • 1471.   drawEachLabel:
  • 1472.   function
  • 1473.   (data)
  • 1474.   {},
  • 1475.   
  • 1476.   
  • 1477.   
  • 1478.   
  • 1479.   
  • 1480.   
  • 1481.   drawEachCell:
  • 1482.   function
  • 1483.   (data)
  • 1484.   {
  • 1485.   
  • 1486.   
  • 1487.   
  • 1488.   
  • 1489.   
  • 1490.   
  • 1491.   
  • 1492.   
  • 1493.   
  • 1494.   
  • 1495.   
  • 1496.   
  • 1497.   //
  • 1498.   data.rIdx
  • 1499.   
  • 1500.   
  • 1501.   
  • 1502.   
  • 1503.   
  • 1504.   
  • 1505.   
  • 1506.   
  • 1507.   
  • 1508.   
  • 1509.   
  • 1510.   
  • 1511.   
  • 1512.   //
  • 1513.   data.cIdx
  • 1514.   
  • 1515.   
  • 1516.   
  • 1517.   
  • 1518.   
  • 1519.   
  • 1520.   
  • 1521.   
  • 1522.   
  • 1523.   
  • 1524.   
  • 1525.   
  • 1526.   //
  • 1527.   data.x
  • 1528.   
  • 1529.   
  • 1530.   
  • 1531.   
  • 1532.   
  • 1533.   
  • 1534.   
  • 1535.   
  • 1536.   
  • 1537.   
  • 1538.   
  • 1539.   
  • 1540.   //
  • 1541.   data.y
  • 1542.   
  • 1543.   
  • 1544.   
  • 1545.   
  • 1546.   
  • 1547.   
  • 1548.   
  • 1549.   
  • 1550.   
  • 1551.   
  • 1552.   
  • 1553.   
  • 1554.   //
  • 1555.   data.value
  • 1556.   
  • 1557.   
  • 1558.   
  • 1559.   
  • 1560.   
  • 1561.   
  • 1562.   }
  • 1563.   };
  • 1564.   
  • 1565. <라인
  • 1566.   차트
  • 1567.   그리기>
  • 1568.   var
  • 1569.   dataTable
  • 1570.   =
  • 1571.   new
  • 1572.   DataTable();
  • 1573.   dataTable.setDataTable(
  • 1574.   [
  • 1575.   ...
  • 1576.   ]
  • 1577.   );
  • 1578.   
  • 1579.   var
  • 1580.   brush
  • 1581.   =
  • 1582.   new
  • 1583.   LineBrush();
  • 1584.   
  • 1585.   var
  • 1586.   chart
  • 1587.   =
  • 1588.   new
  • 1589.   LineBarChart();
  • 1590.   chart.setBrush(
  • 1591.   brush
  • 1592.   );
  • 1593.   chart.setDataTable(
  • 1594.   dataTable
  • 1595.   );
  • 1596.   
  • 1597.   chart.draw();
  • 1598.   
  • 1599. <바
  • 1600.   차트
  • 1601.   그리기>
  • 1602.   var
  • 1603.   dataTable
  • 1604.   =
  • 1605.   new
  • 1606.   DataTable();
  • 1607.   dataTable.setDataTable(
  • 1608.   [
  • 1609.   ...
  • 1610.   ]
  • 1611.   );
  • 1612.   
  • 1613.   //
  • 1614.   var
  • 1615.   brush
  • 1616.   =
  • 1617.   new
  • 1618.   LineBrush();
  • 1619.   var
  • 1620.   brush
  • 1621.   =
  • 1622.   new
  • 1623.   BarBrush();
  • 1624.   
  • 1625.   var
  • 1626.   chart
  • 1627.   =
  • 1628.   new
  • 1629.   LineBarChart();
  • 1630.   chart.setBrush(
  • 1631.   brush
  • 1632.   );
  • 1633.   chart.setDataTable(
  • 1634.   dataTable
  • 1635.   );
  • 1636.   
  • 1637.   chart.draw();
  • 1638.   
  • 1639. 같은
  • 1640.   차트코어,
  • 1641.   같은
  • 1642.   데이터,
  • 1643.   다른
  • 1644.   브러시
  • 1645.   
  • 1646. 회고
  • 1647.   >>
  • 1648.    이런
  • 1649.   걸
  • 1650.   알았더라면
  • 1651.   좋았을
  • 1652.   텐데.
  • 1653.    이런
  • 1654.   건
  • 1655.   좋았다.
  • 1656.    다음엔
  • 1657.   이렇게
  • 1658.   하자.
  • 1659.    
  • 1660.   
  • 1661. 차트로
  • 1662.   표현할
  • 1663.   데이터셋을
  • 1664.   미리
  • 1665.   파악하자.
  • 1666.    -
  • 1667.   헤더에
  • 1668.   아주
  • 1669.   긴
  • 1670.   문자열이
  • 1671.   들어가진
  • 1672.   않는가?
  • 1673.   
  • 1674.    -
  • 1675.   0보다
  • 1676.   작은
  • 1677.   데이터가
  • 1678.   있는가?
  • 1679.   
  • 1680.    -
  • 1681.   값이
  • 1682.   굉장히
  • 1683.   크진
  • 1684.   않은가?
  • 1685.    -
  • 1686.   소수점이
  • 1687.   있나?
  • 1688.    -
  • 1689.   샘플
  • 1690.   주세요!!
  • 1691.    
  • 1692.   
  • 1693. 학습
  • 1694.   테스트
  • 1695.   방식이
  • 1696.   효과적이었다.
  • 1697.    라이브러리를
  • 1698.   익힐
  • 1699.   때
  • 1700.   학습
  • 1701.   테스트
  • 1702.   작성
  • 1703.    
  • 1704.    http://me2.do/5L3jdoc
  • 1705.    
  • 1706.    https://github.com/ohgyun/raphaeljs-learning-test
  • 1707.   
  • 1708. 코어와
  • 1709.   브러시,
  • 1710.   데이터를
  • 1711.   나눈
  • 1712.   것은
  • 1713.   좋은
  • 1714.   선택이었다.
  • 1715.    디자인이
  • 1716.   다른
  • 1717.   라인/바
  • 1718.   차트
  • 1719.   개발
  • 1720.   요청
  • 1721.   
  • 1722.    모바일용
  • 1723.   캔버스
  • 1724.   파이차트
  • 1725.   개발
  • 1726.   요청
  • 1727.    
  • 1728.    -->
  • 1729.   다른
  • 1730.   팀원이
  • 1731.   브러시만
  • 1732.   개발,
  • 1733.   빠르게
  • 1734.   대응
  • 1735.    
  • 1736.    
  • 1737.   
  • 1738.    
  • 1739.   
  • 1740. 지금의
  • 1741.   차트에
  • 1742.   집중한다.
  • 1743.    필요하지
  • 1744.   않은
  • 1745.   확장을
  • 1746.   미리
  • 1747.   고민하지
  • 1748.   말자.
  • 1749.    
  • 1750.    모든
  • 1751.   서비스에
  • 1752.   적용하거나,
  • 1753.    모든
  • 1754.   디자이너와
  • 1755.   기획자를
  • 1756.   만족시킬
  • 1757.   수는
  • 1758.   없다.
  • 1759.    
  • 1760.    요구
  • 1761.   사항과
  • 1762.   표현
  • 1763.   범위를
  • 1764.   정확히
  • 1765.   파악해서,
  • 1766.    최선의
  • 1767.   방법을
  • 1768.   찾아내는
  • 1769.   것이
  • 1770.   가장
  • 1771.   좋겠다.
  • 1772.   
  • 1773. 고맙습니다.
  • 1774.    라파엘
  • 1775.   페이스북
  • 1776.   그룹
  • 1777.   http://me2.do/5Y1ggBr
  • 1778.