Question

我需要显示带有以下数据的AmCharts柱形图

   [
    {
        month: "2017-03",
        source: "TRW",
        turnover: 0,
        target: 1
    },
    {
        month: "2017-04",
        source: "TRW",
        turnover: 2.22,
        target: 1
    },
    {
        month: "2017-03",
        source: "CON",
        turnover: 7.27,
        target: 1
    },
    {
        month: "2017-04",
        source: "CON",
        turnover: 1.53,
        target: 1
    }
]

要求是使用month（例如：2017-03，2017-04）作为类别轴，按源（ex：TRW，CON）数据对列进行分组

请查看显示所需图表的this picture。

问题是我需要根据源数据值动态添加列（例如：来源：＆＃34; CON＆＃34;）

我在互联网上找到的每个例子都显示我需要在每个列的JSON中添加单独的字段。例如

[
    { 
        "month": " 2017-03 ", 
        "TRW": 0, 
        "CON": 7.27, 
        "target": 1 
    },
    { 
        "month": " 2017-04 ", 
        "TRW": 2.22, 
        "CON": 1.53, 
        "target": 1 
    }
]

该项目是基于API的，顶部的JSON数据集是我从API获得的。将来可能会添加更多来源，而不是现有的两个来源（例如：TRW，CON）这是我需要根据数据自动填充此列的主要原因。

感谢对此的任何支持。

谢谢@xorspark
This是应用您的解决方案后的样子。

Answer 1

您可以在创建图表之前使用JavaScript预处理数据，以便将其转换为AmCharts所需的格式（按月分组并为每个来源分配字段，正如您从示例中看到的那样）并动态创建为每个新源和目标行呈现列所需的图形对象。这将处理外部API添加其他源数据的动态情况。

假设您通过AJAX获取数据：

//GetAPIData abstracted as a fetch request to jsfiddle's echo endpoint
//for demonstrating external data workflow. See fiddle for details.
GetAPIData().then(function(response) {
  if (response.ok) {
    return response.json();
  }
  throw new Error("Response not OK");
}).then(function(data) {
  var graphMap = {};
  var graphs = [];
  var dataMap = {};
  var dataProvider = [];

  //go through the data and create graphs based on the different sources
  //and fill in the dataMap object to remap/convert later
  data.forEach(function(dataItem) {
    //create a new graph if we did not already create one
    if (graphMap[dataItem.source] === undefined) {
      graphMap[dataItem.source] = 1;
      graphs.push({
        valueField: dataItem.source,
        title: dataItem.source,
        type: 'column',
        fillAlphas: 1,
        balloonText: '<b>' + dataItem.source + '</b>: [[value]]'
      });
    }
    //create a new object for the month if not already created
    if (dataMap[dataItem.month] === undefined) {
      dataMap[dataItem.month] = {month: dataItem.month};
    }
    //add new source information and set target information for that month.
    dataMap[dataItem.month][dataItem.source] = dataItem.turnover;
    dataMap[dataItem.month].target = dataItem.target;
  });
  //add the target line
  graphs.push({
    valueField: 'target',
    title: 'Target',
    balloonText: '<b>Target</b>: [[value]]'
  });

  //convert dataMap to an array sorted by date
  Object.keys(dataMap).sort(function(lhs, rhs) {
    return new Date(lhs) - new Date(rhs);
  }).forEach(function(month) {
    dataProvider.push(dataMap[month]);
  });

  //create the chart using the data/graphs created
  AmCharts.makeChart('chartdiv', {
    // ... other properties omitted ...
    dataProvider: dataProvider,
    graphs: graphs,
    // ... other properties omitted ...
  });      
}).catch(function(error) {
  alert(error.message);
});

这是一个小提琴：https://jsfiddle.net/g46qqf4c/4/

AmCharts基于数据的动态列

1 个答案: