Rev. 2.73

linegraph.gif

PlotrPrototype을 이용한 도표엔진이다. canvas 태그 또는 SVG 엘리먼트를 통해 파이그래프, 라인그래프, 막대그래프를 가로 형태나 세로 형태로 실시간 생성하는 라이브러리를 배포하고 사용예제를 설명하고 있다. 파이어폭스와 사파리 그리고 오페라9 에서 지원하고 있는 canvas 태그를 인터넷 익스플로러에서도 가능하게 해주는 ExplorerCanvas 라이브러리를 포함한다.

<canvas id="plotr1" height="300" width="500"></canvas>
//our sample dataset
var dataset = {
  'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
  'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
  'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
  'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
};

//some basic options
var options = {
  padding: {left: 30, right: 0, top: 10, bottom: 30},
  backgroundColor: '#dbdbdb',
  colorScheme: 'red',
  xTicks: [
    {v:0, label:'day 1'},
    {v:1, label:'day 2'},
    {v:2, label:'day 3'},
    {v:3, label:'day 4'},
    {v:4, label:'day 5'}
  ]
};

//initialize a new LineChart with the options specified above
var line = new Plotr.LineChart('plotr',options);
//add the dataset
line.addDataset(dataset);

//render the linechart in the canvas element with ID 'plotr'
line.render();

Comments

Got something to add? You can just leave a comment.

  • 오늘도 소중한 정보 얻어 가네요 ^^
    또 준님 덕에 재미난 것들을 상상하게 됩니다 (_ _) 감사 합니다

    reply edit

  • 별말씀을요 ^^;

    reply edit

  • 이야.. 준님 궁금한거 하나 있는데 물어봐도 되나요??
    이런 정보는 어디서 그렇게 잘 찾으세요?? ㅎㅎ

    영어가 되어야 하나??> ^^ 암튼 좋은정보 쌩유~~

    reply edit

  • 저는 주로 Ajaxian.com의 기사를 자주 참조하는 편입니다.

    reply edit

  • 준님 안녕하세여^^
    위에 소스를 돌려 보았거든요..
    'Plotr 이 정의되지 않았습니다' 에러가 납니다.
    물론 ExCanvas.js 를 인클루드 한 소스인데 말이져 ^^;;
    실행가능한 html 이 있으시면 부탁드려도 될까요?

    reply edit

  • <html><body>
    <div style="position: relative; width: 500px;"><canvas id="plotr" height="300" width="500"></canvas><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 261px; left: -3px; text-align: right;">0.0</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 230.531px; left: -3px; text-align: right;">0.3</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 200.062px; left: -3px; text-align: right;">0.6</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 169.594px; left: -3px; text-align: right;">0.9</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 139.125px; left: -3px; text-align: right;">1.2</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 108.656px; left: -3px; text-align: right;">1.5</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 78.1875px; left: -3px; text-align: right;">1.8</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 47.7188px; left: -3px; text-align: right;">2.1</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 24px; top: 17.25px; left: -3px; text-align: right;">2.4</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 50px; top: 273px; left: 5px; text-align: center;">day 1</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 50px; top: 273px; left: 122.5px; text-align: center;">day 2</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 50px; top: 273px; left: 240px; text-align: center;">day 3</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 50px; top: 273px; left: 357.5px; text-align: center;">day 4</div><div style="overflow: hidden; position: absolute; font-size: 9px; font-family: Arial; z-index: 10; color: rgb(102, 102, 102); width: 50px; top: 273px; left: 475px; text-align: center;">day 5</div></div>
    <script src="solutoire.com%20_%20Plotr%20LineChart%20Example_files/prototype.js" type="text/javascript"></script>
    <script src="solutoire.com%20_%20Plotr%20LineChart%20Example_files/excanvas.js" type="text/javascript"></script>
    <script src="solutoire.com%20_%20Plotr%20LineChart%20Example_files/plotr.js" type="text/javascript"></script>

    <script type="text/javascript">
    //our sample dataset
    var dataset = {
    'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
    'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
    'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
    'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
    };

    //some basic options
    var options = {
    padding: {left: 30, right: 0, top: 10, bottom: 30},
    backgroundColor: '#dbdbdb',
    colorScheme: 'red',
    xTicks: [{v:0, label:'day 1'},
    {v:1, label:'day 2'},
    {v:2, label:'day 3'},
    {v:3, label:'day 4'},
    {v:4, label:'day 5'}
    ]
    };

    //initialize a new LineChart with the options specified above
    var line = new Plotr.LineChart('plotr',options);
    //add the dataset
    line.addDataset(dataset);
    //render the linechart in the canvas element with ID 'plotr'
    line.render();
    </script> <script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="solutoire.com%20_%20Plotr%20LineChart%20Example_files/snap_preview_anywhere.htm"></script>
    </body></html>

    위처럼 작성하니 잘 돌아가는군요.

    reply edit

  • 땡초 땡초

    헉^^
    너무 감사드립니다~~

    지금 바로 돌려봐야겠어요

    reply edit

  • 성공하시길 바랍니다 ^^

    reply edit

Your Reaction Time!

captcha

avatar