загрузка данных JSON Как отображать кластерные гистограммы в динамических графиках - PullRequest
Новая
       11

загрузка данных JSON Как отображать кластерные гистограммы в динамических графиках

0 голосов
/ 02 мая 2018

Обновлено

Можете ли вы графики возможных значений динамических. Ниже кода передать статическое значение, но я получаю динамические графы кода. Пример: resultx получает 3-4 подкатегории i каждый раз, когда задает значение графиков. 

var processedChartData = resultx.map(function(rawDataElement) {
  var newDataElement = { "category": rawDataElement.category };
  rawDataElement.data.forEach(function(nestedElement, index) {
    newDataElement["value" + index] = nestedElement.value;
    newDataElement["subcategory" + index] = nestedElement.subcategory
  });
  return newDataElement;
});

AmCharts.makeChart(id, {
    "type": "serial",
    "theme": "light",
    "categoryField": "category",
    "rotate": false,
    "startDuration": 0,
    "categoryAxis": {
      "gridPosition": "start",
      "position": "left"
    },
    "graphs": [{
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2004",
        "type": "column",
      "balloonText": "[[subcategory0]]: [[value]]",
        "valueField": "value0"
    }, {
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2005",
        "type": "column",
      "balloonText": "[[subcategory1]]: [[value]]",
        "valueField": "value1"
    },
    {
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2005",
        "type": "column",
      "balloonText": "[[subcategory2]]: [[value]]",
        "valueField": "value2",
    }],
    "guides": [],
    "allLabels": [],
    "balloon": {},
    "titles": [],
    "dataProvider": processedChartData,
      "export": {
        "enabled":false
       }
  });

Оригинальный вопрос:

Кластерные гистограммы Массив внутри ключа, как отображать несколько гистограмм.

Мой JSON ниже: 

[
      {
        "0":
        {
          "package_sold":"88",
          "vSectorName":"Meat"
        },
        "country":"France"
      },
      {
        "0":
        {
          "package_sold":"68",
          "vSectorName":"Meat"
        },
        "1":
        {
          "package_sold":"151",
          "vSectorName":"Poultry"
        },
        "country":"United Kingdom"
      }
    ]

Как показать на графике dataProvider

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Это динамические данные JSON, но чтобы показать, как использовать и строить, я определил это так. На самом деле, я использую AJAX для получения данных JSON, а затем строю их динамически. Здесь у меня был Generate Graph, GLName против его открытия для каждого месяца сравнительно. надеюсь, это будет полезно для всех 

var resp=[
  {
    "MONTH_": "01",
    "MONTH_NAME": "JAN",
    "YEAR_": "2018",
    "GL_NAME": "CASH,FACTORY, SITE,OFFICE ",
    "GL_ID": "79,81,522,89",
    "OPENING": "606294,0,24851,170392",
    "RECEIPT": "1641300,40000,210850,82300",
    "PAYMENT": "2074921,103209,168893,40000",
    "CLOSING": "172673,149483,66808,0"
  },
  {
    "MONTH_": "02",
    "MONTH_NAME": "FEB",
    "YEAR_": "2018",
    "GL_NAME": " SITE,CASH,OFFICE ,FACTORY",
    "GL_ID": "81,79,522,89",
    "OPENING": "66808,172673,0,149483",
    "RECEIPT": "102650,40000,3479000,200000",
    "PAYMENT": "239379,168339,40000,3388527",
    "CLOSING": "-69921,0,181144,263146"
  },
  {
    "MONTH_": "03",
    "MONTH_NAME": "MAR",
    "YEAR_": "2018",
    "GL_NAME": "FACTORY,CASH,OFFICE , SITE",
    "GL_ID": "89,81,79,522",
    "OPENING": "181144,-69921,0,263146",
    "RECEIPT": "30000,40000,1943500,200000",
    "PAYMENT": "69242,1806551,18177",
    "CLOSING": "141902,400095,40000,111902"
  }
]
      
        var newChartDataArr = [];
        var colNameArr = [];
        var GLID = [];
        var amtArr = [];
        var newBarGraph = [];
        myJsonString1 = JSON.stringify(resp);
        var obj = JSON.parse(myJsonString1);
        var obj1 = resp[0];
        //spliting of GLName
        if (obj1.GL_NAME.toString().indexOf(',') != -1) {
            colNameArr = obj1.GL_NAME.split(',');
            GLID =obj1.GL_ID.split(',');
        } else {
            colNameArr.push(obj1.GL_NAME);
            GLID =obj1.GL_ID.split(',');
        }
        //Getting Month and Opening of GL
        $.each(resp, function (i, value) {
            var newObj = {}; 
            newObj['MONTH_NAME'] = value.MONTH_NAME+"-"+value.YEAR_;
            $.each(value, function (k, v) {
                if (k == 'OPENING') {
                    for (var i = 0; i < colNameArr.length; i++) {
                        if (v.toString().indexOf(',') != -1) {
                            newObj[colNameArr[i]] = parseFloat(v.split(',')[i]);
                        } else {
                            newObj[colNameArr[i]] = parseFloat(v);
                        }
                    }
                }
            });
            newChartDataArr.push(newObj); //GL with Opening
        });
        for (var i = 0; i < colNameArr.length; i++) {
            let graph = {};
            graph["id"] = "v-"+GLID[i];
            graph["balloonText"] = colNameArr[i] + "  [[category]] Amount:[[value]]",
            graph["title"] = colNameArr[i];
            graph["valueField"] = colNameArr[i];
            graph["fillAlphas"] = 0.8;
            graph["lineAlpha"] = 0.2;
            graph["type"] = "column";
            newBarGraph.push(graph);
        }
        chart = AmCharts.makeChart("Monthdiv", {
            "type": "serial",
            "theme": "light",
            "categoryField": "MONTH_NAME",
            "startDuration": 1,
            "trendLines": [],
            "legend": {
            	"position": "bottom",
            	"maxColumns": 2,
                "useGraphSettings": true
            },
            "depth3D": 10,
            "angle": 60,
            "graphs": newBarGraph,
            "guides": [],
            "valueAxes": [
                {
                	 "position": "left",
                     "title": "Opening"
                }
            ],
            "categoryAxis": {
            	 "gridPosition": "start",
                 "labelRotation": 90,
                 "title": "Months"
            },
            "allLabels": [],
            "balloon": {},
            "titles": [{
                "text":"Monthly Sale"
            }],
            "dataProvider": newChartDataArr,
            "export": {
                "enabled": true
            },
            "listeners": [{
                "event": "clickGraphItem",
                "method": function (event) {
                  var gl_ID=(event.item.graph.id).slice(2);
                  var month = (event.item.category).slice(0, 3);
                  var calender = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                  var monthVal = calender.indexOf(month) + 1;
                  var year = (event.item.category).slice(4, 8);
                  $("#fromDate").val("01/" + monthVal + "/" + year);
                  $("#toDate").val("30/" + monthVal + "/" + year);
                  Daliy(gl_ID,event.item.category);
                  showSummary();
                }
              }]
        });             
     
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="col-sm-12" id="Monthdiv" style="height: 370px;">
0 голосов
/ 02 мая 2018

AmCharts не поддерживает вложенный JSON. Вам нужно будет объединить ваш JSON в один объект, чтобы ваши valueFields были различны в каждом элементе вашего массива.

Например, это: 

  {
    "0":
    {
      "package_sold":"68",
      "vSectorName":"Meat"
    },
    "1":
    {
      "package_sold":"151",
      "vSectorName":"Poultry"
    },
    "country":"United Kingdom"
  }

можно превратить в это: 

{
  "Meat_package_sold": 68,
  "Poultry_package_sold": 151,
  "country": "United Kingdom"
}

Оттуда вы можете установить свой график valueField на "Meat_package_sold" и "Poultry_package_sold". Я предполагаю, что ваш categoryField является "country".

Вам нужно будет либо изменить свой бэкэнд, либо написать какой-нибудь JS, чтобы переназначить ваши данные в формат, который может распознавать AmCharts.

Редактировать: Вот базовый пример, который переназначает ваши данные JSON с использованием JS: 

var rawData = [{
    "0": {
      "package_sold": "88",
      "vSectorName": "Meat"
    },
    "country": "France"
  },
  {
    "0": {
      "package_sold": "68",
      "vSectorName": "Meat"
    },
    "1": {
      "package_sold": "151",
      "vSectorName": "Poultry"
    },
    "country": "United Kingdom"
  }
]
var newData = [];
rawData.forEach(function(dataItem) {
  var newDataItem = {};
  Object.keys(dataItem).forEach(function(key) {
    if (typeof dataItem[key] === "object") {
      newDataItem[dataItem[key]["vSectorName"] + "_package_sold"] = dataItem[key]["package_sold"];
    } else {
      newDataItem[key] = dataItem[key];
    }
  });
  newData.push(newDataItem);
});

console.log(JSON.stringify(newData));

Демонстрация вашей диаграммы в правильном формате JSON: 

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "categoryField": "country",
  "graphs": [{
      "fillAlphas": 0.8,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "Meat_package_sold"
    },
    {
      "fillAlphas": 0.8,
      "lineAlpha": 0.2,
      "type": "column",
      "valueField": "Poultry_package_sold"
    }
  ],
  "dataProvider": [{
    "Meat_package_sold": 88,
    "country": "France",
  }, {
    "Meat_package_sold": 68,
    "Poultry_package_sold": 151,
    "country": "United Kingdom"
  }, {
    "Meat_package_sold": 120,
    "Poultry_package_sold": 110,
    "country": "Germany"
  }]
});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>
...