使用新数据集更新 highcharts答案

【问题标题】：Update highcharts with new set of data使用新数据集更新 highcharts
【发布时间】：2020-09-27 13:39:25
【问题描述】：

通过从下拉列表中多选添加新堆栈来更新堆积柱形图。我尝试做new Highcharts.chart(...) 我没有得到新的筹码。当我重新创建它时，我至少仍然可以保留以前的图表。没有其他娱乐，选择我只是得到一个空白图表。

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>

为什么不添加新堆栈？

【问题讨论】：

标签： javascript jquery json charts highcharts

【解决方案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.net/BlackLabel/0hq2c1r4/

【讨论】：