javascript - 通过循环分配的 Highcharts 的系列名称和数据

Question

我正在尝试循环 JSON 对象列表，并分配一些键作为 highcharts 系列的名称，并将 fusionsData 作为数据列表。我已经放置了一个静态图表示例，其中包含我试图为图表的系列数据实现的目标。如果有帮助的话，我也给出了我的 JSON 模式的示例。

我也有一个 jsfiddle static expected chart jsfiddle

这是我的静态预期输出图表:

Highcharts.chart('container', {

    title: {
        text: 'mychart'
    },

    subtitle: {
        text: 'mychart'
    },

    xAxis: {
    categories: [
      'r611.10i',
      'r622.15i',
      'r633.7i',
      '701.10i',
      '702.11i',
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Convergence'
    }
  },
    
    series: [{
        name: 'tc1',
        data: [1.1, 1.2, 1.3, 1.4, 1.5]
    }, {
        name: 'tc2',
        data: [2.1, 2.2, 2.3, 2.4, 2.5]
    }, {
        name: 'tc3',
        data: [3.1, 3.2, 3.3, 3.4, 3.5]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

这是我的 JSON 架构数据:

var data1 = {
  "TestBedGeneralInfo": {
    "TestCaseName": ['tc1','tc2', 'tc3', 'tc4', 'tc5']
  },

  "TestCaseData": {
    "tc1": {
      "convergenceData":1.1
    },
    "tc2": {
      "convergenceData":1.2
    },
    "tc3": {
      "convergenceData": 1.3
    },
    "tc4": {
        "convergenceData":1.4
    },
    "tc5": {
       "convergenceData":1.5
    }
  }
}
var data2 = {
  "TestBedGeneralInfo": {
    "TestCaseName": ['tc1','tc2', 'tc3', 'tc4', 'tc5']
  },

  "TestCaseData": {
    "tc5": {
      "convergenceData":2.5
    },
    "tc4": {
      "convergenceData":2.4
    },
    "tc3": {
      "convergenceData": 2.3
    },
    "tc2": {
        "convergenceData":2.2
    },
    "tc1": {
       "convergenceData":2.1
    }
  }
}
var data3 = {
  "TestBedGeneralInfo": {
    "TestCaseName": ['tc1','tc2', 'tc3', 'tc4', 'tc5']
  },

  "TestCaseData": {
    "tc4": {
      "convergenceData":3.4
    },
    "tc5": {
      "convergenceData":3.5
    },
    "tc1": {
      "convergenceData": 3.1
    },
    "tc2": {
        "convergenceData":3.2
    },
    "tc3": {
       "convergenceData":3.3
    }
  }
}

以下是我尝试过的一些循环:

var tc_name_list = ['tc1','tc2', 'tc3', 'tc4', 'tc5']
var tc_data = [data1,data2,data3]
for(objNum=0; objNum < tc_data.length; objNum++) {
     var tc_temp_name;
    console.log('objNum is ' + objNum)
    for(i=0; i < tc_name_list.length; i++) {
        tc_temp_name = tc_name_list[i];
        console.log('tc_temp_name is ' + tc_temp_name + '  :->' + tc_data[objNum]['TestCaseData'][tc_temp_name]['convergenceData'])
        var output = tc_data[objNum]
    };
}

Answer 1

你可以这样做:

var data = [data1, data2, data3],
    categories = ['tc1', 'tc2', 'tc3', 'tc4', 'tc5'],
    finalData = {},
    series;

categories.forEach(function (cat) {
  if (!finalData[cat]) {
    finalData[cat] = {
      name: cat,
      data: []
    }
  }

  data.forEach(function(dataElem) {
    finalData[cat].data.push(dataElem.TestCaseData[cat].convergenceData);
  });
});

series = Object.keys(finalData).map(i => finalData[i]);

演示:

• https://jsfiddle.net/BlackLabel/3jo2z8kf/