Highcharts를 사용하여 HRFCorecast의 데이터를 쉽게 묘사

여러분들이 제일 좋아요!HRForecast
...그러나 본사도 회사 내부 도구로 사용Aiming 데이터 분석 팀 현장.
그러나 HRF의 편리한 데이터 취합 메커니즘을 유연하게 활용하면서 뷰를 조정했다.
도표 그리기 도구도 바뀌었고 여기HighchartsJS를 사용했습니다.
사내운용이라 상업용으로 허가증을 샀어요.
HighchartsJS로 HRF를 묘사하는 데이터가 비교적 간단하기 때문에 써야 한다.
※ 이미지에 포함된 데이터는 임시 데이터
HRFCorecast에서 CSV 가져오기
HRF 경로에 포함된 ifr를 csv로 바꾸면 CSV 데이터를 얻을 수 있습니다.
네http://.../csv/service/section/graph입니까 아니면http://.../csv_complex/service/section/graph입니까?
이것을 Highcharts 드로잉에 건네주세요.
그나저나 GrowthForectast에서도 JSON을 얻었고 Highcharts에서 그렸으며 같은 프로그램에서 도표를 동시에 사용했습니다.
데이터 모듈

HRF의 ↑ 같은 차트를 고성능 charts로 그립니다.
Highcharts의 데이터 지정 방법은 생략되었지만, 잘 변환해야 합니다.
단, 번거롭기 때문에 데이터 모듈을 사용하여 csv 데이터를 원형으로 그려 주십시오.

!!! 5
%html{lang: 'ja'}
  %head
    %meta{charset: 'utf-8'}
    %script{src: '//code.jquery.com/jquery-1.11.0.min.js'}
    %script{src: '//code.highcharts.com/highcharts.js'}
    %script{src: '//code.highcharts.com/modules/data.js'} # CSV などを読み込んで良い感じにしてくれるモジュール

  %body
    #graph

:coffeescript
  $.get 'http://path/to/hrf/csv_complex/service/section/graph?t=m', (data) ->
    $('#graph').highcharts
      data:
        csv: data

그렇습니다. 네, 됐습니다.
※ aax이기 때문에 크로스-오리진 문제를 적절히 해결하세요
x축 시간 조정
다만, 자세히 보니 날짜가 이미 지났다.
예를 들어 2014/02/06 22:00 그 다음은 2014/02/25 10:00:00이다.
따라서 가로축을 시간과 같이 설정합니다.

!!! 5
%html{lang: 'ja'}
  %head
    %meta{charset: 'utf-8'}
    %script{src: '//code.jquery.com/jquery-1.11.0.min.js'}
    %script{src: '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js'}
    %script{src: '//code.highcharts.com/highcharts.js'}
    %script{src: '//code.highcharts.com/modules/data.js'}

  %body
    #graph

:coffeescript
  $.get 'http://path/to/hrf/csv_complex/service/section/graph?t=m', (data) ->
    $('#graph').highcharts
      data:
        csv: data
        parseDate: (val) -> moment(val).unix() * 1000

옵션data.parseDate, 변환할 함수를 정의합니다(momentjs 사용).

이렇게 되면 시간순의 도표가 된다.
HRFCorecast의 모양과 기능을 덮어씁니다.
HighchartsJS에는 많은 설정 항목이 있습니다.
차트 유형, 스태킹 설정, 차트 확대 및 축소 등 HRFCorecast에서 기능이 떨어지는 것을 방지하기 위해 이러한 설정을 잘 설정했다.

!!! 5
%html{lang: 'ja'}
  %head
    %meta{charset: 'utf-8'}
    %script{src: '//code.jquery.com/jquery-1.11.0.min.js'}
    %script{src: '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js'}
    %script{src: '//code.highcharts.com/highcharts.js'}
    %script{src: '//code.highcharts.com/modules/data.js'}

  %body
    #graph

:coffeescript
  $.get 'http://path/to/hrf/csv_complex/service/section/graph?t=m', (data) ->
    $('#graph').highcharts
      data:
        csv: data
        parseDate: (val) -> moment(val).unix() * 1000
      chart:
        type: 'area'
        zoomType: 'x'
      rangeSelector:
        enabled: true
      plotOptions:
        series:
          stacking: true
          marker:
            radius: 0

이렇게 많이 설정했으니 바꾸고 싶어도 안 어울려요.


현재 옵션
pg, SVG 등 이미지로 다운로드할 수 있고 CSV를 다운로드할 수 있으며 다양한 언어를 지원하고 하이스톡 kJS 기능을 활용해 범위를 유연하게 좁힐 수 있다(드래그 제외).
데이터를 동적으로 삽입하고 마우스 패스에 너무 많은 이벤트를 눌러서 지정할 수도 있습니다.

현재 옵션은 100줄이 넘는 코드로 팽창했다.

에이밍은 팽창하는 설정 파일뿐만 아니라 데이터 분석에 관심이 있는 엔지니어찾고 있다도 제공한다. 어?