通过循环分配的 highcharts 的系列名称和数据

Posted 2023-05-08

【中文标题】通过循环分配的 highcharts 的系列名称和数据

【英文标题】：series name and data for highcharts assigned via loop

【发布时间】：2020-02-20 03:37:41

【问题描述】：

我正在尝试循环 JSON 对象列表，并将一些键指定为 highcharts 系列的名称，并将 converversData 指定为数据列表。我已经放置了一个静态图表示例，其中包含我试图为图表的系列数据实现的目标。如果有帮助，我也给出了我的 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]
    ;

【参考方案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/

【讨论】：

非常感谢。这非常有帮助。我的一个问题是在我的第一个示例中，类别列表设置为这样categories = ['tc1', 'tc2', 'tc3', 'tc4', 'tc5'],，我认为您使用series = Object.keys(finalData).map(i => finalData[i]); 来订购它。但是，如果类别不是数字而是像这样categories = ['tc-A', 'tc-B', 'tc-C', 'tc-D', 'tc-E'],，我怎么能让它工作呢@我在这里放了另一个 jsfiddle 来解释我的意思。 jsfiddle.net/mastarke/gwj9stym/3

对不起，我想出了我的问题。它确实适用于categories = ['tc-A', 'tc-B', 'tc-C', 'tc-D', 'tc-E']jsfiddle.net/mastarke/gwj9stym/6