2015-01-13 3 views
2

amCharts를 사용하여 깔때기 형 차트를 작성하고 있습니다. Amcharts에서 제공하는 기본 데모는 수직 유입 경로입니다.AmCharts에서 깔때기 형 차트를 90도 회전하려면 어떻게해야합니까?

Amcharts를 사용하여 가로형 깔때기 형 차트를 얻으려면 어떻게해야합니까?

여기 코드를 참조하십시오. http://jsfiddle.net/us8hgp6k/

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "funnel", 
    "theme": "none", 
    "dataProvider": [{ 
     "title": "Website visits", 
     "value": 300 
    }, { 
     "title": "Downloads", 
     "value": 123 
    }, { 
     "title": "Requested prices", 
     "value": 98 
    }, { 
     "title": "Contaced", 
     "value": 72 
    }, { 
     "title": "Purchased", 
     "value": 35 
    }, { 
     "title": "Asked for support", 
     "value": 25 
    }, { 
     "title": "Purchased more", 
     "value": 18 
    }], 
    "titleField": "title", 
    "marginRight": 160, 
    "marginLeft": 15, 
    "labelPosition": "right", 
    "funnelAlpha": 0.9, 
    "valueField": "value", 
    "startX": 0, 
    "neckWidth": "40%", 
    "startAlpha": 0, 
    "outlineThickness":1, 
    "neckHeight": "30%", 
    "balloonText": "[[title]]:<b>[[value]]</b>"  
}); 

답변

2

funnel 형 차트에서 수평 유입 경로를 설정하는 방법은 없습니다.

그러나 가로 막 대형 차트를 사용하고 차트의 아래쪽 절반에 배경을 덧씌우면 ("무효화") 가로 터널을 시뮬레이션 할 수 있습니다.

this JSFiddle을 참조하십시오. 이 부분

참고 다시 만드는 :

  1. typeserial입니다. 그러면 막 대형 차트가 만들어집니다.
  2. dataProvider의 데이터 값도 각각 음수 값을 갖습니다.
  3. 두 개의 그래프가 그려져 있습니다 (). 첫 번째 그래프는 부정 된 값을 사용하여 부정 (그래프 아래의 공백)을 그립니다. 두 번째 그래프는 양수 값을 사용하여 유입 경로를 그립니다. 알림 fillToGraphfromGraph으로 설정됩니다. 다른 그래프의 id 속성입니다. 설명서에 따르면

상기 fillToGraph 속성 : 여기서 다른 그래프를 설정하고 fillAlpha는> 0 fillToGraph이 그래프의 영역 인 경우 대신 영역의 충전 (충전한다

X 축으로).

관련 문제