Как динамически создавать хай-чарты на кнопках

Question

У меня есть старшая диаграмма и кнопки, всякий раз, когда я нажимаю на кнопку, другая диаграмма должна быть сгенерирована / создана ниже другой диаграммы с динамическим div, я имею в виду, что нам нужно создать динамический div onclick и динамически добавлять этот идентификатор div в highchart, я пытался, но яне был уверен, как добавить динамический идентификатор div в старшую диаграмму, вот код ниже, заранее спасибо

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'US and USSR nuclear stockpiles'
  },

  xAxis: {
    allowDecimals: false,
    labels: {
      formatter: function() {
        return this.value; // clean, unformatted number for year
      }
    }
  },
  yAxis: {
    title: {
      text: 'Nuclear weapon states'
    },
    labels: {
      formatter: function() {
        return this.value / 1000 + 'k';
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
  },
  plotOptions: {
    area: {
      pointStart: 1940,
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  series: [{
    name: 'USSR/Russia',
    data: [null, null, null, null, null, null, null, null, null, null,
      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
      1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
      11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
      30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
      37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
      21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
      12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
    ]
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div><button class="button1">submit1</button> <button class="button2">submit2</button> <button class="button3">submit3</button></div>
<div id="container" style="height: 400px; width: 500"></div>

Answer 1

Вы можете сохранить id в переменной и создать новый график следующим образом:

$('#button1').on('click', function() {
    $('body').append($("<div id='chart-" + index + "'></div>"));

    Highcharts.chart('chart-' + index, {
        series: [{
            data: [1, 2, 3]
        }]
    });

    index++;
});

Демо-версия: http://jsfiddle.net/BlackLabel/89etrLm2/