Question

以下是data1

的结构

var data1 = [{
"Date": "2016-07-09",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 27.55,
"PNL": 12.89
}];

由于Amcharts中不允许使用嵌套数据（如果有办法处理嵌套数据，那就更好了），是否有可能将其平放到顶级对象中（我无法更改原始输入数据）。例如：

var data1 = [{
"Date": "2016-07-09",
"H1_PNL2": 20, 
"H1_NAV2" : 20
"H2_PNL2": 20, 
"H2_NAV2" : 20,
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"H1_PNL2": 20, 
"H1_NAV2" : 20
"H2_PNL2": 20, 
"H2_NAV2" : 20,
"NAV": 27.55,
"PNL": 12.89
}];

在这样的Amcharts代码中：

var dataSet1 = new AmCharts.DataSet();
dataSet1.color = "#b0de09";
//create your field mappings for each valueField
dataSet1.fieldMappings = valueFields.map(function(valueField) {
  return {
    fromField: valueField,
    toField: valueField
  };
});
dataSet1.dataProvider = data;
dataSet1.categoryField = "Date";

chart.dataSets = [dataSet1];

// PANELS
var stockPanel = new AmCharts.StockPanel();
stockPanel.showCategoryAxis = true;
stockPanel.title = "PNL2";
stockPanel.eraseAll = false;
//stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

//create a graph for each valueField
valueFields.forEach(function(valueField) {
  var graph = new AmCharts.StockGraph();
  graph.title = valueField;
  graph.valueField = valueField;
  graph.bullet = "round";
  graph.bulletColor = "#FFFFFF";
  graph.bulletBorderColor = "#00BBCC";
  graph.bulletBorderAlpha = 1;
  graph.bulletBorderThickness = 2;
  graph.bulletSize = 7;
  graph.lineThickness = 2;
  graph.lineColor = "#00BBCC";
  graph.useDataSetColors = false;
  stockPanel.addStockGraph(graph);
});

chart.addPanel(stockPanel);
chart.write("chartdiv");
}

createStockChart(data1);

这是我的数据结构

[{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…},…]
  [0 … 99]
    0:{,…}
      CashLeft:0
      Commission:0
      Date:"/Date(1454428800000)/"
      NAV:0
      PNL:0
      Performance:[{
        0:{Stock: {Symbol: "1044 HK", Close: 66.714, Date: "/Date(1454428800000)/"}, Position: 0,…}
        1:{Stock: {Symbol: "1088 HK", Close: 10.9, Date: "/Date(1454428800000)/"}, Position: 0,…}
        2:{Stock: {Symbol: "12 HK", Close: 35.955, Date: "/Date(1454428800000)/"}, Position: 0,…}

这是我写下的代码

    function createStockChart(data) {
        var chart = new AmCharts.AmStockChart();

        data.forEach(function (data1) {
            data1.Performance.forEach(function (stockItem) {
                data1[stockItem.Symbol + "_PNL2"] = stockItem.PNL2;
            });
            //the following are completely optional - AmCharts won't look at StockList, but if you
            //want to conserve memory and don't need the StockList for anything else, you can remove
            //it
            data1.StockList.length = 0; //delete the StockList Array. Not necessary if you need it for something else
            delete data1.StockList; //remove the property from the object if you want. Also not necessary.
        });

但是当我看到数据结构没有改变时，也许这里的问题是库存清单（我的意思是名称（Symbol））将在几天后改变，这意味着属性数据会定期更改，我不知道是不是重点？

Answer 1

假设您的StockList将始终包含Name，PNL2和NAV2，您可以循环浏览数据，并在其余部分之前将属性和值分配给对象代码。

data1.forEach(function(arrayElement) {
  arrayElement.StockList.forEach(function(stockItem) {
    arrayElement[stockItem.Name + "_PNL2"] = stockItem.PNL2;
    arrayElement[stockItem.Name + "_NAV2"] = stockItem.NAV2;
  });
  //the following are completely optional - AmCharts won't look at StockList, but if you
  //want to conserve memory and don't need the StockList for anything else, you can remove
  //it
  arrayElement.StockList.length = 0; //delete the StockList Array. Not necessary if you need it for something else
  delete arrayElement.StockList; //remove the property from the object if you want. Also not necessary.
});

从那里，您可以从我之前的回答中运行其余代码。

演示：

＆＃13;

var data1 = [{
  "Date": "2016-07-09",
  "StockList": [{
    "Name": "H1",
    "PNL2": 20,
    "NAV2": 20
  }, {
    "Name": "H2",
    "PNL2": 20,
    "NAV2": 20
  }],
  "NAV": 26.28,
  "PNL": 7.61
}, {
  "Date": "2016-07-10",
  "StockList": [{
    "Name": "H1",
    "PNL2": 20,
    "NAV2": 20
  }, {
    "Name": "H2",
    "PNL2": 20,
    "NAV2": 20
  }],
  "NAV": 27.55,
  "PNL": 12.89
}];

data1.forEach(function(arrayElement) {
  arrayElement.StockList.forEach(function(stockItem) {
    arrayElement[stockItem.Name + "_PNL2"] = stockItem.PNL2;
    arrayElement[stockItem.Name + "_NAV2"] = stockItem.NAV2;
  });
  //the following are completely optional - AmCharts won't look at StockList, but if you
  //want to conserve memory and don't need the StockList for anything else, you can remove
  //it
  arrayElement.StockList.length = 0; //delete the StockList Array. Not necessary if you need it for something else
  delete arrayElement.StockList; //remove the property from the object if you want. Also not necessary.
});

console.log(data1);

＆＃13;

将嵌套数据展平到顶级对象Amcharts中

1 个答案: