처음에

시계열 그래프(time series chart)란 문헌 1 로 서두에 명기되어 있듯이,

데이터는 x 축에서 등 간격이 아닙니다

x 축의 레이블은 데이터와 무관합니다

아래 그래프(Chart.js v2.0의 sample입니다)에서 파란색 실선과 점선이 일반 꺾은선 그래프, 회색 선이 시계열 그래프입니다.



깨끗한 그래프가 간편하게 걸리는 Chart.js입니다만, 지금까지 시계열 그래프라든지 산포도라든지가 없고, v2. 0의 로드맵이었습니다(

※ 플러그인으로 만들고 계신 분은있었습니다.

현재 beta-2 에서 상기와 같이 시계열 그래프의 묘화가 우울하고 있는 것 같습니다.

2016.05.02 보충:
V2.0 출시 된 것 같습니다.

시계열 그래프의 샘플 프로그램을 실행할 때의 주의

chart.js의 github에서 v2.0-dev를 선택하고



Zip 다운로드


samples의 html을 적당히 선택하고 브라우저에서 열면 모두 깨끗한 그래프를 걸어줍니다.



timeScale 폴더 아래의 html, 예를 들어 line-time-scale.html을 열면 아래와 같이 새하얀 캠퍼스가 그려집니다.



디버거에서 보면 moment.js가 없다는 것이 원인 인 것 같습니다.


소스를 보면 node_modules 아래 moment.js를 사용하고 있습니다.


그래서 다음 방법 중 하나를 사용하여 moment를 준비합니다 (1.이 보통이라고 생각 합니다만...

chart.js의 루트 디렉터리에서 npm install

moment.js를 다운로드하고 사용하도록 샘플 프로그램을 변경하십시오.

그러면 시작 부분의 깨끗한 그래프가 그려집니다.


부끄러운 이야기입니다만, 잠시 이것을 눈치채지 못하고, time series 는 아직인 것일까~, 라든지 착각하고 있었습니다 ^^;

v1.0의 변경 사항

시계열 그래프가 moment.js 에 depend 하고 있는 것 외에, 내가 깨달은 범위에서 v1.0 으로부터 여러가지 변경점이 있는 것 같습니다.

v1.0 에서는 Chart 를 new 하고, Chart 의 Line 메소드로 그래프를 렌더링 하고 있었지만, v2.0 에서는 Chart 를 new 할 때의 config 파라미터로 그래프의 종류를 지정해, new 의 타이밍에서 그리기. Line 메서드는 더 이상 없습니다

동적으로 변화하는 Chart 를 쓸 때, v1.0 에서는 chart.datasets 의 point 와, chart.scales 를 재기록하는 것도 할 수 있었습니다만 (보통은 addData, removeData 를 사용합니다만 단번에 전부 재기록 언제든지 위의 방법은 편리했습니다.) 그 위치가 chart.config.data 아래로 바뀌 었습니다.

변경 사항 목록은 현재 문서에 포함되어 있지 않은 것처럼 보입니다.

references

issue에 오르고 있다 feature 정의

New chart type: Time Series #1059 플러그인으로 제공되었습니다

Chart.Scatter 작년 생활에 출시되었습니다

2.0.0-beta2 moment.js의 본가입니다

momentjs moment.js의 매우 이해하기 쉬운 기사

Moment.js 사용 변경 문서 없잖아! issue