Question

我正在使用amCharts创建漏斗图表。 Amcharts提供的默认演示是垂直渠道。

如果我想使用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属性只是翻转图表。）

但您可以使用条形图并在图表的下半部分（＆＃34;否定＆＃34;）上覆盖背景来模拟水平漏斗。

请参阅this JSFiddle。

请注意以下部分重新创建：

type是serial。这会创建一个条形图。
dataProvider中的每个数据值也都有一个否定值。
正在绘制两个图表。第一个图形使用否定值绘制否定（图形下方的空白区域）。第二个图使用正值绘制漏斗。注意fillToGraph设置为fromGraph;这是其他图表的id属性。

根据文档，fillToGraph属性：

您可以在此处设置另一个图形，如果fillAlpha> 0，则将填充此图形到fillToGraph的区域（而不是将该区域填充到X轴）。

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

1 个答案: