Укладка осуществляется через ось. Если вы хотите, чтобы строки не складывались, поместите их в отдельную ось значений, для которой не установлено значение stackType, и свяжите графики с идентификатором оси значений через свойство valueAxis. Вы также можете отключить метки «ось значений» линий, сетку и синхронизировать мин / макс, а также:
graphs:[{
type: "line",
// ...
valueAxis: "dollarAxis-line"
},
// ...
],
valueAxes: [
{
"id": "dollarAxis",
"includeHidden": true,
// ...
},
{
"id": "dollarAxis-line",
"labelsEnabled": false,
"gridAlpha": 0,
"axisAlpha": 0,
}
],
"listeners": [{
"event": "init",
"method": function(e) {
// sync axes
e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
e.chart.valueAxes[1].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
e.chart.validateData();
}
}]
Редактировать: Если вы начинаете спустой график, вы можете рассмотреть возможность использования события dataUpdated, чтобы оно повторно синхронизировало оси после обновления dataProvider. Метод validateData вызывает это событие, поэтому вам нужно будет обернуть этот вызов в условие, которое проверяет наличие флага, чтобы диаграмма не вызывала этот метод бесконечно.
"listeners": [{
"event": "dataUpdated",
"method": function(e) {
setTimeout(function() {
if (!e.chart.updating) {
e.chart.updating = true;
// sync axes
e.chart.valueAxes[0].maximum = undefined;
e.chart.valueAxes[0].minimum = undefined;
e.chart.valueAxes[1].maximum = undefined;
e.chart.valueAxes[1].minimum = undefined;
e.chart.validateData();
e.chart.valueAxes[1].maximum = e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
e.chart.validateData();
e.chart.updating = false;
}
}, 100);
}
}]
Демонстрация ниже:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"fontFamily": "arial",
"categoryAxis": {
"gridPosition": "start",
"title": "Time",
"titleRotation": 0
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverUpper",
"title": "Hedging",
"newStack": false,
"type": "column",
"valueField": "hedging"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverAdditional",
"title": "Maximum Additional Hedging",
"type": "column",
"newStack": false,
"valueField": "maxAdditionalHedging",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"balloonColor": "#B0DE09",
"fillColors": "#B0DE09",
"lineColor": "#B0DE09",
"id": "cfGraph",
"title": "Forecasted Cashflows",
"type": "column",
"newStack": true,
"valueField": "exposure"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "triangleUp",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMin",
"valueAxis": "dollarAxis-line",
"title": "Policy Minimum",
"valueField": "minHedge"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "triangleDown",
"type": "line",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMax",
"valueAxis": "dollarAxis-line",
"title": "Policy Maximum",
"valueField": "maxHedge"
}
],
"guides": [],
"valueAxes": [{
"id": "dollarAxis",
"stackType": "regular",
"includeHidden": true,
"title": "Amount ($)"
},
{
"id": "dollarAxis-line",
"stackType": "none",
"labelsEnabled": false,
"gridAlpha": 0,
"axisAlpha": 0
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true,
"spacing": 0,
"valueWidth": 15
},
"export": {
"enabled": true
},
"dataProvider": [{
"category": "Category 1",
"minHedge": 151218,
"hedging": 111436,
"maxHedge": 236849,
"maxAdditionalHedging": 272065,
"additionalHedging": 233236,
"exposure": 163731
},
{
"category": "Category 2",
"minHedge": 150517,
"hedging": 137299,
"maxHedge": 258805,
"maxAdditionalHedging": 254932,
"additionalHedging": 183495,
"exposure": 111847
},
{
"category": "Category 3",
"minHedge": 158456,
"hedging": 198219,
"maxHedge": 231274,
"maxAdditionalHedging": 259615,
"additionalHedging": 187108,
"exposure": 168738
},
{
"category": "Category 4",
"minHedge": 167931,
"hedging": 173121,
"maxHedge": 263334,
"maxAdditionalHedging": 260449,
"additionalHedging": 229972,
"exposure": 156174
},
{
"category": "Category 5",
"minHedge": 164449,
"hedging": 157823,
"maxHedge": 268980,
"maxAdditionalHedging": 268896,
"additionalHedging": 180031,
"exposure": 100893
},
{
"category": "Category 6",
"minHedge": 166465,
"hedging": 128504,
"maxHedge": 241036,
"maxAdditionalHedging": 269858,
"additionalHedging": 230233,
"exposure": 117158
},
{
"category": "Category 7",
"minHedge": 167117,
"hedging": 110649,
"maxHedge": 229749,
"maxAdditionalHedging": 262671,
"additionalHedging": 201500,
"exposure": 188282
},
{
"category": "Category 8",
"minHedge": 151167,
"hedging": 123489,
"maxHedge": 249919,
"maxAdditionalHedging": 268805,
"additionalHedging": 206302,
"exposure": 120797
},
{
"category": "Category 9",
"minHedge": 154961,
"hedging": 185898,
"maxHedge": 269185,
"maxAdditionalHedging": 271949,
"additionalHedging": 173116,
"exposure": 184312
},
{
"category": "Category 10",
"minHedge": 154385,
"hedging": 141307,
"maxHedge": 234509,
"maxAdditionalHedging": 274889,
"additionalHedging": 216132,
"exposure": 111974
}
],
"listeners": [{
"event": "dataUpdated",
"method": function(e) {
setTimeout(function() {
if (!e.chart.updating) {
e.chart.updating = true;
// sync axes
e.chart.valueAxes[0].maximum = undefined;
e.chart.valueAxes[0].minimum = undefined;
e.chart.valueAxes[1].maximum = undefined;
e.chart.valueAxes[1].minimum = undefined;
e.chart.validateData();
e.chart.valueAxes[1].maximum = e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
e.chart.validateData();
e.chart.updating = false;
}
}, 100);
}
}]
});
function generateData() {
var data = [];
for (var i = 0; i < 10; ++i) {
data.push({
"category": "Category " + (i + 1),
"minHedge": Math.floor(Math.random() * 100000 + 200000),
"hedging": Math.floor(Math.random() * 150000 + 225000),
"maxHedge": Math.floor(Math.random() * 250000 + 200000),
"maxAdditionalHedging": Math.floor(Math.random() * 100000 + 200000),
"additionalHedging": Math.floor(Math.random() * 150000 + 275000),
"exposure": Math.floor(Math.random() * 225000 + 375000)
});
}
chart.dataProvider = data;
chart.validateData();
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
<button onclick="generateData()">Generate Data</button>