AmCharts基於數據

Question

我需要與由源以下數據

[ 
    { 
     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 
    } 
] 

要求是組列，以顯示AmCharts柱形圖動態列：在使用月（例如（例如TRW，CON）數據：2017- 03，2017-04）作爲類別軸

請看this picture它顯示所需的圖表。

問題是我需要被基於源數據值動態地添加的列（例如：源：「CON」）

每個實例我在因特網上發現表明，我需要添加在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/