Amcharts漏斗图，如何设置固定高度？

Question

I have a Funnel chart from https://www.amcharts.com/demos/funnel-chart/?theme=none . It works fine.

I would like to set a fixed height for the segments, but I don't know how.

Answer 1

There isn't a way to set fixed height segments directly in the config, but you can fake it using your data by setting fake values for the area/height of the segments but display the real values in a separate property in your balloonText and labelText , for example:

  "dataProvider": [ {
    "title": "Website visits",
    "areaValue": 30, //value used for segment height/area
    "realValue": 300
  }, {
    "title": "Downloads",
    "areaValue": 30,
    "realValue": 123
  }, // ...
  ],
  // ...
  "valueField": "areaValue", //use the area value for visual purposes
  "balloonText": "[[title]]:<b>[[realValue]]</b>", //reference the actual value through the realValue
  "labelText": "[[title]]: [[realValue]]", 

Demo below with segments with identical height:

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

 #chartdiv { width: 100%; height: 500px; } 

 <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/funnel.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <script src="https://www.amcharts.com/lib/3/themes/none.js"></script> <div id="chartdiv"></div>