Question

我有一个对象的JS数组，每个对象都包含一系列我用来填充HighCharts图表的变量，例如名称和数据得分。它是同一张图表，但是每个人的系列都在变化。因此，我尝试使用基本的HighCharts对象，并仅遍历数据。但是我发现我的基础对象只是附加了，而实际上不是基础。此fiddle演示了该问题。我尝试使用const和let，发现可以执行Object.create()并且该对象将属于proto。但我也看到这已被弃用。我敢肯定这很简单，但是我还没有弄清楚。

看输出，第一个图表是正确的。 {attending:"Mr A", data:[1,2,3]},被用作系列。第二个图表应显示1个名为Mr B的序列，其数据点为[8,9,10]。

当它实际显示2个系列时，第一个1（A先生）和第二个。

Answer 1

您遇到的问题是由于Java中的按引用传递设计。您正在循环中变异'highchartBase'对象。因此，每个后续图表都将具有先前的系列属性，因为它们都被推送到了列表中。

您可以通过深度克隆'highchartBase'对象来解决您的问题：

  var chart = JSON.parse(JSON.stringify(highchartBase));

或者您每次都可以像Mosè Raguzzini的回答一样在循环中重新创建对象：

var chart = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'A Title'
    },
    series: []
}

Answer 2

在JS中，objects和arrays由引用传递。这就是为什么在第二张图表B中附加了A的原因。一个简单的解决方法是使用JSON解析和字符串化方法克隆对象。

var chart = JSON.parse(JSON.stringify(highchartBase));

Answer 3

没有时间研究何时通过hicharts修改对象，这是一个简单的解决方法

series.forEach(function(e) {
	var parent = document.getElementById('base');
  var div = document.createElement('div');
  var id = e.attending.replace(/([^a-z0-9]+)/gi, '-');
  div.setAttribute('id', id);
  parent.append(div);
  var chart =  {
chart: {
        type: 'column'
    },
    title: {
        text: 'A Title'
    },
    series: []
};
  chart.series.push( 
  	{name: e.attending, data: e.data, color: '#808387'} 
  );
  Highcharts.chart(div, chart);
});

在forEach JavaScript循环中使用基础对象

3 个答案: