Highcharts.update 修改原始數據數組

Question

我遇到了一個奇怪的問題，這可能是我做的，但我已經嘗試了我能遇到的一切。

我有一個包含八個不同數據集的堆積柱形圖。 我有一個 select 字段，其中包含每個數據集的標題。

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數組，但沒有更新整個圖表series ，甚至比使用map(o => ({...o}))不會克隆嵌套data arrays 因此它們仍然容易發生變異。 （您可以使用map(o => ({...o, data: [...o.data]}))但如果您的系列/數據結構發生變化，它會很脆弱）。

所以...這是一個快速片段，它將數據集存儲在它們自己的數組中，並將Highchart.series選項設置為單獨的active object。

active的 object 最初被分配了第一個圖表 object 的克隆版本，使用JSON進行深度克隆 - 請參閱此問題以深入討論其缺點和更好的選擇在 JavaScript 中深度克隆 object 的最有效方法是什么？

當 select change事件觸發時，使用相同的方法克隆新選擇索引處的圖表 object 並分配給active的 object。

最后， chart.update()指向與實例化 highchart active.series時相同的 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>