如何在AmCharts中旋转漏斗图90度？

Question

我正在使用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>"    
 });

Answer 1

无法从funnel-type图表创建水平漏斗。( rotate属性只会颠倒图表。)

但是你可以用条形图模拟水平漏斗，并在图表的下半部分(“否定”)上叠加一个背景。

见这个JSFiddle。

请注意这些部分以重新创建：

1. type是serial。这将创建一个条形图。
2. dataProvider中的每个数据值也有一个负值。
3. 有两个图形正在绘制中。第一个图使用被否定的值绘制否定(图下的空白)。第二个图使用正值绘制漏斗。注意，fillToGraph设置为fromGraph；这是另一个图的id属性。

根据文档，fillToGraph属性：

您可以在这里设置另一个图，如果fillAlpha >0，则从该图到fillToGraph的区域将被填充(而不是将该区域填充到X轴)。