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

Question

我正在使用 amCharts 创建漏斗图。 Amcharts默认提供的demo是垂直漏斗

如果我想用Amcharts得到水平漏斗图怎么办？

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 类型的图表创建水平漏斗。（rotate 属性只是颠倒了图表。）

但是您可以通过使用条形图并在图表的下半部分 ("negating") 上叠加背景来模拟水平漏斗。

参见 this JSFiddle。

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

type 是 serial。这将创建一个条形图。
dataProvider中的每个数据值也有一个负值。
正在绘制两个个图表。第一张图使用求反值绘制求反（图下方的白色 space）。第二张图使用正值绘制漏斗。注意 fillToGraph 设置为 fromGraph；这是另一个图的 id 属性。

根据文档，fillToGraph 属性:

You can set another graph here and if fillAlpha is >0, the area from this graph to fillToGraph will be filled (instead of filling the area to the X axis).

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

How do I rotate the funnel chart 90 degrees in AmCharts?

javascript

amcharts