Я хотел бы создать групповую диаграмму водопада, используя AmCharts.
Мои данные будут иметь два измерения для категории и 1 измерение для значения.
Например, скажите, что у меня есть «Population» в качестве моей categoryPath и «Value» в качестве моего valuePath. Я хочу, чтобы поле «Население» отображалось как общее значение за этот год. Затем у меня есть другое поле под названием «State», которое будет увеличивать / уменьшать значения (плавающие столбцы). Как мне добиться этого?
Это мои данные: `{
"Population 1":[
{
"waterfallData.PopulationName":"Population 1",
"waterfallData.Value":-2333,
"waterfallData.State":"State 2"
},
{
"waterfallData.PopulationName":"Population 1",
"waterfallData.Value":8786,
"waterfallData.State":"State 1"
}
],
"Population 2":[
{
"waterfallData.PopulationName":"Population 2",
"waterfallData.Value":-1000,
"waterfallData.State":"State 2"
},
{
"waterfallData.PopulationName":"Population 2",
"waterfallData.Value":5000,
"waterfallData.State":"State 1"
}
],
"Population 3":[
{
"waterfallData.PopulationName":"Population 3",
"waterfallData.Value":-2000,
"waterfallData.State":"State 2"
},
{
"waterfallData.PopulationName":"Population 3",
"waterfallData.Value":3000,
"waterfallData.State":"State 1"
}
]
}
Я использую amCharts версии 3. Настройки Amchart:
var settings = {
type: "serial",
theme: "light",
dataProvider: transformedData,
legend: {
data: [{ title: "Increasing", color: "#54cb6a" }, { title: "Decreasing", color: "#cc4b48" }]
},
valueAxes: valueAxe,
startDuration: 1,
graphs: [
{
balloonText: "<span style='color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]]</b>",
colorField: "color",
fillAlphas: 0.8,
labelText: "$[[balloonValue]]",
lineColor: "#BBBBBB",
openField: "open",
type: "column",
valueField: "close",
adaptiveLabelPosition: true
}
],
trendLines: xPath ? trendLines : [{
"dashLength": 3,
"finalCategory": "Income B",
"finalValue": 11.13,
"initialCategory": "Income A",
"initialValue": 11.13,
"lineColor": "#888888"
}, {
"dashLength": 3,
"finalCategory": "Expenses A",
"finalValue": 15.81,
"initialCategory": "Income B",
"initialValue": 15.81,
"lineColor": "#888888"
}, {
"dashLength": 3,
"finalCategory": "Expenses B",
"finalValue": 12.92,
"initialCategory": "Expenses A",
"initialValue": 12.92,
"lineColor": "#888888"
}, {
"dashLength": 3,
"finalCategory": "Revenue",
"finalValue": 8.64,
"initialCategory": "Expenses B",
"initialValue": 8.64,
"lineColor": "#888888"
}],
columnWidth: 0.6,
categoryField: xPath,
categoryAxis: {
gridPosition: "start",
axisAlpha: 0,
gridAlpha: 0.1,
title: categoryLabel,
labelRotation: 45
},
export: {
enabled: true
}
};
Итак, из этой сгруппированной информации. Как назначить значения открытия и закрытия, чтобы соответствовать ожидаемому результату?
Пример вывода выглядит примерно так: