2017-09-06 13 views
1

The chart I'm trying to createamCharts를 사용하면 아래와 같이 막대 뒤에 임계 값을 다시 만들 수 있습니까?

최종 차트의 모양을 위 이미지에 표시했지만 이미지를 만드는 데 어려움이 있습니다.

우리는 사용하고있는 기술로 인해 amCharts를 사용해야하며 필자는 원하는대로 색상이 쌓이고 색상이 지정되었지만 임계 값을 추가하는 방법을 찾을 수는 없습니다 (밝은 녹색/파란색/노란색). 또한 이미지의 상단에 따라 로그 눈금으로 표시하는 것이 좋겠지 만, 그렇게 신경 쓰지는 않습니다.

도움을 주시면 감사하겠습니다.

업데이트 : 내가 원하는대로 xorspark의 극적인 도움에

덕분에 나는 대수를 사용하지 끝났다하더라도, 그것을 얻을 관리했습니다.

code은 관심있는 사람들에게 https://codepen.io/dangerworm/pen/mByGqL입니다. A much better version nearly matching the original image

답변

1

을 사용하여 임계 값을 지정하고 각 세분을 레이블 할 수 있습니다. 특정 출력물을 얻으려면 채워진 영역에 대해 하나씩 레이블과 선을 맨 위에 배치하는 두 세트의 가이드가 필요합니다.

valueAxes: [ 
    { 
     logarithmic: true, 
     guides: [ 
     { 
      fillColor: "#ffff00", 
      fillAlpha: 0.5, 
      lineAlpha: 0, 
      value: .1, //note that you can't use 0 in a logarithmic axis 
      toValue: 40 
     },{ 
      dashLength: 6, 
      fillColor: "#ffff00", 
      fillAlpha: 0.5, 
      label: "poor", 
      position: "right", 
      lineAlpha: 1, 
      value: 40, 
     }, 
     // ... 
    ] 
    // ... 
    } 

Demo

+0

감사 예를 들면 다음과 같습니다. 나는 그것을 시도하고 몇 가지 가이드를 얻을 수 있지만 로그 설정 stackType 설정과 충돌하는 것 같습니다. –

+0

아하, stackType을 언급하지 않았습니다. (나중에 참조 할 수 있도록, 스크린 샷보다 더 능동적입니다.) 일부 stackTypes는 축 계산 방법으로 인해 로그와 충돌합니다. 즉, log (0)은 정의되지 않았으므로 0이 축에있는 경우 상황이 중단됩니다. 대문자 축이 작동하도록 ['treatZeroAs'] (http://docs.amcharts.com/3/javascriptcharts/ValueAxis#treatZeroAs)를 작은 십진수로 설정해야 할 수도 있습니다. 이것이 도움이되지 않으면, 바이올린을 올리십시오. – xorspark