2014-07-19 4 views
-5

이 그래프 유형이란 무엇입니까?morris.js로 SED 그래프를 만들 수 있습니까?

morris.js로 다시 만들 수 있습니까?

그렇다면 신속하고 간단한 예제 인 codepen/jsfiddle을 사용하십시오 (데이터를 복제 할 필요는 없지만 수직선과 수평선을 보여줌).

그렇지 않다면 널리 사용되는 자바 스크립트 그래프 라이브러리가이를 지원합니까? graph

또는 (이것은 현상금을위한 것입니다) 어떻게 위의 그래프를 지원하기 위해 https://github.com/morrisjs/morris.js/을 편집 할 수 있습니까?

나는 정말로 포인터를 요구하고있다. 그러나 누군가가 오픈 소스에 기여하고 어떤 담당자를 얻고 싶다면 나는 매우 감사 할 것이다.

하지만 내가 말했듯이 위의 그래프를 만들려면 morris repo에서 살펴 봐야 할 파일과 기능에 대한 몇 가지 지침이 있습니다.

+0

그래프의 이름을 아는대로 더 친숙해질 수 있도록 제목을 업데이트 해 드리겠습니다. – Starkers

+1

이것은 StackOverflow에 대한 주제입니다. –

+0

@ZachSaucier JavaScript 라이브러리로 그래프 유형을 만드는 방법은 무엇입니까? 정말? – Starkers

답변

4

그 그래프는 에서 SED or spectral energy distribution 그래프 또는 플롯입니다. 자세한 내용은 here 입니다.

플롯에는 오류 막대가 표시되지만 점 레이블은 표시되지 않습니다.

모든 SED 플롯 그래서이 사람이

  • 그래프 제목
  • 산점도
  • X 축 라벨
  • Y 축 라벨
  • X 축이있는 기능을 설명 할 수 있습니다,이처럼 보이지 최상위 축
  • X 축 하단 눈금
  • X 축 로그 눈금
  • Y 축 스케일을 포인트
  • 오차 막대를 기록 산점도, x 축 방향의
  • 포인트 라벨
  • Y 축 문자열 레이블 및 날짜

그것은 수에 다른 지점에 대한

  • 사용자 정의 글리프 morri.sjs로 다시 만들 수 있지만 누락 된 기능을 모두 추가하려면 약간의 노력이 필요합니다.

    morris.js의 기존 기능 (기능 추가 없음)을 사용하여 위의 링크에서 일부 데이터를 플롯하기위한 기본적인 시도입니다.

    당신은 당신이 게시 된 사진과 같이 아무것도 보지 않는다 볼 수 있듯이 HTML

    <!DOCTYPE html> 
    <html> 
    <head> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
        <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> 
    <meta charset=utf-8 /> 
    <title> Chart Example</title> 
    </head> 
    <body> 
        <p align="center">MRK 1014</p> 
        <div id="line-example"></div> 
    </body> 
    </html> 
    

    자바 스크립트

    Morris.Line({ 
        element: 'line-example', 
        data: [ 
        { y: Math.log(1.45E+18), a: Math.log(6.41E-08) }, 
        { y: Math.log(1.45E+18), a: Math.log(1.03E-07) }, 
        { y: Math.log(1.45E+18), a: Math.log(1.31E-07) }, 
        { y: Math.log(1.45E+18), a: Math.log(6.28E-08) }, 
        { y: Math.log(1.45E+18), a: Math.log(8.55E-07) }, 
        { y: Math.log(1.45E+18), a: Math.log(8.55E-07) }, 
        { y: Math.log(1.45E+18), a: Math.log(5.59E-08) }, 
        { y: Math.log(1.45E+18), a: Math.log(6.55E-08) } 
        ], 
        xkey: 'y', 
        ykeys: ['a', ], 
        labels: ['Series A'], 
        linewidth: 0, 
        pointSize: 2, 
        ymin : Math.log(1E-08), 
        ymax : Math.log(1E3), 
    
    }); 
    

    .그래프 제목 morris.js 기능의 일부가 될 필요가 없습니다 기능으로 목록 기능을 통해가는

    ,

    , 그것은 일반 HTML 제목 또는 단락 요소가 될 수 있습니다.

    X 축 레이블 및 Y 축 레이블도 morris.js에서 지원되지 않으므로 Y 단락에 대해 문서화 된 here과 같이 HTML 단락 요소 및 CSS3 쓰기 모드 속성 또는 변환 함수를 사용하여 구입할 수 있습니다. 날짜와 문자열이있는 Y 축 레이블은 같은 방법으로 처리 할 수 ​​있습니다.

    상단 눈금에 수동으로 전환을 배치하거나 최상위 눈금 및 전환 지원에 대한 지원을 추가 할 수 있습니다.

    로그 스케일 지원의 경우 morris.grid.coffeemorris.line.coffe을 수정해야합니다.

    사용자 정의 글리프 및 오류 막대 지원 및 x 축의 범주 형 레이블과 동일합니다.

    작업량에 따라 Morris.js는 Pretty 시계열 선 그래프를위한 프로젝트이며 그래프는 선 그래프도 시계열 선 그래프도 아닙니다. d3.js 또는 Google Charts 또는 기타 JavaScript 그래프 라이브러리를 사용하는 것이 더 적합하다고 생각합니다.

    d3.js scatterplot 예는 herehere입니다. 또한 체크 아웃 Iris SED Analysis Tool SEDs를 그려 NED 직접 가져 오기를 지원합니다.

    이러한 옵션에는 이미 그래프 제목 지원, 산점도 지원, x 및 y 축 레이블 지원 및 로그 스케일 지원 및 포인트에 대한 사용자 정의 글리프가 있으며 다른 것들은 morris.js에 확장 기능을 작성하는 것보다 쉽게 ​​추가 할 수 있습니다.

  • 관련 문제