javascript - Highcharts .update 修改原始数据数组

Question

我遇到了一个奇怪的问题，这可能是我造成的，但我已经尝试了我能遇到的一切。

我有一个包含八个不同数据集的堆叠柱形图。我有一个选择字段，其中包含每个数据集的标题。

const charts = [
  {
    "title": "Chart One",
    "subtitle": "Subtitle One",
    "source": "<p>Source One</p>\n",
    "content": "<p>Content One</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [0,0,0,0,0,0,0,0,0,0,null,0,0,0,0,null,0],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [1085,1364,2398,2362,3954,6612,6388,8841,8397,6021,null,4962,7407,2825,2143,null,4823],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Two",
    "subtitle": "Subtitle Two",
    "source": "<p>Source Two</p>\n",
    "content": "<p>Content Two</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [380,608,469,285,634,1496,712,3059,1821,1049,null,916,2240,612,895,null,1064],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [705,756,1928,2078,3320,5116,5676,5782,6576,4973,null,4046,5167,2212,1248,null,3759],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Three",
    "subtitle": "Subtitle Three",
    "source": "<p>Source Three</p>\n",
    "content": "<p>Content Three</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [648,932,1708,1326,2246,4646,4143,6732,6042,4222,null,3268,5723,1987,1501,null,3322],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [438,432,690,1037,1708,1966,2244,2110,2355,1799,null,1694,1685,838,642,null,1501],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Four",
    "subtitle": "Subtitle Four",
    "source": "<p>Source Four</p>\n",
    "content": "<p>Content Four</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [380,608,469,285,634,1496,712,3118,2498,3567,null,1411,2687,698,1156,null,1479 ],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [705,756,1928,2078,3320,5116,5676,5724,5899,2455,null,3551,4720,2126,987,null,3344],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Five",
    "subtitle": "Subtitle Five",
    "source": "<p>Source Five</p>\n",
    "content": "<p>Content Five</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [561,852,1362,2012,3404,5643,6195,8153,8158,5905,null,4502,6243,2646,1750,null,4305],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [524,512,1036,350,550,969,193,689,240,117,null,460,1165,178,393,null,518],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Six",
    "subtitle": "Subtitle Six",
    "source": "<p>Source Six</p>\n",
    "content": "<p>Content Six</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [120,209,397,655,1115,2584,2944,3322,3075,2266,null,1751,2606,1032,740,null,1704],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [965,1155,2000,1708,2840,4027,3443,5519,5323,3755,null,3211,4802,1793,1403,null,3118],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Seven",
    "subtitle": "Subtitle Seven",
    "source": "<p>Source Seven</p>\n",
    "content": "<p>Content Seven</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [294,494,391,800,1765,4227,5474,7212,7705,5836,null,3755,4640,2070,1463,null,3490],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [791,870,2007,1563,2189,2385,914,1630,692,186,null,1207,2768,755,680,null,1333],
        "stack": 0
      }
    ]
  },
  {
    "title": "Chart Eight",
    "subtitle": "Subtitle Eight",
    "source": "<p>Source Eight</p>\n",
    "content": "<p>Content Eight</p>\n",
    "series": [
      {
        "name": "Legend One",
        "data": [486,741,1160,1825,3105,5205,6012,7553,7723,5780,null,4259,5754,2424,1596,null,4035],
        "stack": 0
      },
      {
        "name": "Legend Two",
        "data": [599,623,1237,537,849,1407,376,1288,674,242,null,703,1654,401,547,null,787],
        "stack": 0
      }
    ]
  }
]

当用户选择他们想要查看的图表时，我会获取图表 [selectedIndex].series 所需的数据并将其传递给:

chartObj.update({
    series: charts[selectedIndex].series
}, false );
chartObj.redraw();

整体有效并且图表已正确更新，但是，chart[0].series 会使用最后选择的图表数据进行更新。由于某些奇怪的原因，图表数组正在修改。它只修改数组中的第一个图表。对于我的生活，我无法弄清楚为什么会这样。任何见解将不胜感激。

我还尝试了一个 for 循环遍历 chartObj 系列并将其与所需的图表数组项匹配，并将 .setData 与“数据”一起使用，但这有其自身的问题。这并没有修改原始数组，但是图表将不再更新。我也用 .update 尝试了相同的循环。

Codepen 错误:https://codepen.io/rossberenson/pen/mdrWgPe

Answer 1

我挖得更深一点，发现 chart.update() 调用正在切换嵌套的 series 数组，但没有更新整个图表对象，更多甚至使用 map(o => ({...o})) 克隆 series 数组也不会克隆嵌套的 data数组，因此它们仍然容易发生突变。 (您可以使用 map(o => ({...o, data: [...o.data]})) 但如果您的系列/数据结构发生变化，它会很脆弱)。

所以...这是一个快速片段，它将数据集存储在它们自己的数组中，并将 Highchart.series 选项设置为单独的 active 对象。

active 对象最初被分配了第一个图表对象的克隆版本，使用 JSON 进行深度克隆——请参阅此问题以深入讨论其缺点和更好的选择 What is the most efficient way to deep clone an object in JavaScript?

当 select change 事件触发时，使用相同的方法克隆新选择索引处的图表对象并分配给 active 对象。

最后，chart.update() 被调用，指向与实例化 highchart 类时相同的 active.series。

const cloneSample = (sample) => {
  // Crude JSON deep clone – see referenced question for discussion
  return JSON.parse(JSON.stringify(sample));
}

let active = cloneSample(samples[0]);

const highchart = Highcharts.chart('container', {
  chart: { type: 'bar' }, title: { text: active.title },
  xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] },
  yAxis: { min: 0, title: { text: 'Total fruit consumption' } }, legend: { reversed: false },
  plotOptions: { series: { stacking: 'normal' } },
  series: active.series
});

const select = document.querySelector('.select');
select.addEventListener('change', () => {
  let
    selected = select.value,
    newSample = cloneSample(samples[selected]);
  
  active = newSample;

  highchart.update({
    title: { text: active.title },
    series: active.series,
  });

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<select class="select">
    <option value="0">Sample One</option>
    <option value="1">Sample Two</option>
    <option value="2">Sample Three</option>
</select>

<div id="container"></div>

<script>
const samples = [
  {
    "title": "Sample One",
    "series": [
      {
        name: 'John',
        data: [5, 3, 4, 7, 2]
      }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
      }, {
        name: 'Tara',
        data: [3, 4, 4, 2, 5]
      }
    ]
  },
  {
    "title": "Sample Two",
    "series": [
      {
        name: 'Donna',
        data: [2, 1, 4, 6, 2]
      }, {
        name: 'Mark',
        data: [1, 4, 3, 4, 1]
      }, {
        name: 'Tim',
        data: [6, 4, 9, 3, 5]
      }
    ]
  },
  {
    "title": "Sample Three",
    "series": [
      {
        name: 'Mara',
        data: [3, 3, 1, 7, 2]
      }, {
        name: 'Tom',
        data: [0, 1, 2, 4, 1]
      }, {
        name: 'Lara',
        data: [3, 8, 5, 2, 5]
      }
    ]
  }
]
</script>