2015-01-13 3 views
2

Я использую amCharts для создания диаграммы последовательности. Демонстрация по умолчанию, предоставляемая Amcharts, представляет собой вертикальную воронку.Как повернуть диаграмму воронки на 90 градусов в AmCharts?

Что делать, если я хочу получить горизонтальную диаграмму воронки, используя 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 -типа диаграммы а. (Объект rotate просто переворачивает диаграмму вверх ногами.)

Но вы можете имитировать горизонтальную воронку, используя гистограмму и накладывая фон на нижнюю половину («отрицая») диаграммы.

См. this JSFiddle.

Примечание эти части, чтобы воссоздать:

  1. type является serial. Это создает гистограмму.
  2. Каждое из значений данных в dataProvider также имеет отрицательное значение.
  3. графики, нарисованные. Первый график рисует отрицание (пробел под графиком) с использованием отрицательных значений. Второй график рисует воронку, используя положительные значения. Уведомление: fillToGraph - fromGraph; это имущество id другого графика.

Согласно документации, то fillToGraph свойство:

Вы можете установить другой график здесь, и если fillAlpha> 0, область из этого графика в fillToGraph будет заполнен (вместо того, чтобы заполнить область к оси X).

Смежные вопросы