Как создать сгруппированную диаграмму водопада в amchart? - PullRequest
0 голосов
/ 08 ноября 2018

Я хотел бы создать групповую диаграмму водопада, используя 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
      }
    };

Итак, из этой сгруппированной информации. Как назначить значения открытия и закрытия, чтобы соответствовать ожидаемому результату?


Пример вывода выглядит примерно так:

enter image description here

...