У меня есть диаграмма воронки от https://www.amcharts.com/demos/funnel-chart/?theme=none. Он работает нормально.
Я хотел бы установить фиксированную высоту для сегментов, но я не знаю, как это сделать.
Невозможно установить фиксированные сегменты высоты непосредственно в конфиге, но вы можете подделать его, используя свои данные, установив поддельные значения для области/высоты сегментов, но отображая реальные значения в отдельном свойстве в вашем balloonText
и labelText
, например:
"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]]",
Демо внизу с сегментами с одинаковой высотой:
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>