플롯에는 오류 막대가 표시되지만 점 레이블은 표시되지 않습니다.
사용자 정의 글리프 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.coffee 및 morris.line.coffe을 수정해야합니다.
사용자 정의 글리프 및 오류 막대 지원 및 x 축의 범주 형 레이블과 동일합니다.
작업량에 따라 Morris.js는 Pretty 시계열 선 그래프를위한 프로젝트이며 그래프는 선 그래프도 시계열 선 그래프도 아닙니다. d3.js 또는 Google Charts 또는 기타 JavaScript 그래프 라이브러리를 사용하는 것이 더 적합하다고 생각합니다.
d3.js scatterplot 예는 here 및 here입니다. 또한 체크 아웃 Iris SED Analysis Tool SEDs를 그려 NED 직접 가져 오기를 지원합니다.
이러한 옵션에는 이미 그래프 제목 지원, 산점도 지원, x 및 y 축 레이블 지원 및 로그 스케일 지원 및 포인트에 대한 사용자 정의 글리프가 있으며 다른 것들은 morris.js에 확장 기능을 작성하는 것보다 쉽게 추가 할 수 있습니다.
그래프의 이름을 아는대로 더 친숙해질 수 있도록 제목을 업데이트 해 드리겠습니다. – Starkers
이것은 StackOverflow에 대한 주제입니다. –
@ZachSaucier JavaScript 라이브러리로 그래프 유형을 만드는 방법은 무엇입니까? 정말? – Starkers