用新的数据集更新高图

Question

通过从下拉菜单中多选添加新的堆栈来更新堆栈列图。我试着做 new Highcharts.chart(...) 我没有得到新的堆栈绘制。当我重新创建它时，我至少仍然得到以前的图表保留。没有再重新创建，on-select我只是得到一个空白的图表。

const obj = {
'10-10-2020': [
  {cat: 'cat', abc: 1, xyz: 5, pqr: 6, jkl: 1, mno: 9},
  {cat: 'dog', abc: 3, xyz: 4, pqr: 1, jkl: 6, mno: 1},
  {cat: 'rat', abc: 7, xyz: 2, pqr: 9, jkl: 3, mno: 0},
  ],
'10-07-2020':[
  {cat: 'cat', abc: 1, xyz: 5, pqr: 6, jkl: 1, mno: 9},
  {cat: 'dog', abc: 3, xyz: 4, pqr: 1, jkl: 6, mno: 1},
  {cat: 'rat', abc: 7, xyz: 2, pqr: 9, jkl: 3, mno: 0},
  ],
'10-09-2020':[
  {cat: 'cat', abc: 1, xyz: 5, pqr: 6, jkl: 1, mno: 9},
  {cat: 'dog', abc: 3, xyz: 4, pqr: 1, jkl: 6, mno: 1},
  {cat: 'rat', abc: 7, xyz: 2, pqr: 9, jkl: 3, mno: 0},
  ],
};

const colors=['#000', 'red', 'blue'];
let arr = ['abc', 'xyz', 'pqr', 'jkl', 'mno'];

const data = (sd) => Object.entries(obj).map(([k, g]) => ({
  ['name']: k,
  ['data']: g.map(entry => entry[sd]),
  ['stack']: sd,
  ['color']: colors[i++ % colors.length],
}));


let i = 0;
let x = data('abc');


 let chartOptions={   chart: {
        type: 'column'
    },

    xAxis: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five']
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: x 
    }

arr.forEach(c => {$(`#mydropdown`).append(`<option value='${c}'>${c}</option>`);});
$(`select#mydropdown option[value='abc']`).prop('selected', 'selected');

$(`#mydropdown`).on('change', function() {
   x = [];
   $('option:selected', this).each(function() {
      i = 0;
			x = [...x, ...data($(this).val())];
   });
   console.log(x);
   new Highcharts.chart('container', chartOptions);
});

let mychart = new Highcharts.chart('container', chartOptions);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<select multiple id="mydropdown"></select>
<div id="container" style="height: 400px"></div>

为什么没有添加新的堆栈？

Answer 1

改变 x 变量是不够的，你需要改变 chartOptions.series 财产。

$(`#mydropdown`).on('change', function() {
    x = [];
    $('option:selected', this).each(function() {
        i = 0;
        x = [...x, ...data($(this).val())];
    });
    chartOptions.series = x;
    new Highcharts.chart('container', chartOptions);
});

---

现场演示。 http:/jsfiddle.netBlackLabel0hq2c1r4