Несколько диаграмм с одинаковыми данными не загружаются на одной странице: Highcharts

Question

Я пытаюсь отобразить Highchart с такими же данными в пользовательском №. Скажем, я хочу, чтобы график отображался 2 раза в одной и той же динамически.

Что я сделал, так это установил график для l oop, в котором я могу динамически повторять график несколько раз.

Вот сценарий, который я пробовал.

    var len = 2 ;

var chartArea = document.getElementById("content");

for(var i=0;i<len;i++)
{
    console.log("I", i);
           chartArea.innerHTML +=

            '<div id="container'+i+'"></div>';
    var categories =  ["1","2","3","4","5","6","7","8","9","10"];

    Highcharts.stockChart('container'+i, {  

    rangeSelector: {
        enabled: false
    },

      xAxis: {
    labels: {
      formatter: function() {

        return categories[this.value];
      }
    }
  },

  navigator: {
    xAxis: {
      labels: {
        formatter: function() {

          return categories[this.value];
        }
      }
    }
  },

    plotOptions: {
        series: {
            animation: {
                duration: 2000
            },
            marker:{
              enabled: false
            }
        }
    },

    series: [{
        data: [3,5,3,6,2,6,4,9,4,6]
    }]
});

Но проблема в том, что только последний график показывает линейный график. на другом первом графике есть метки оси x, но линейный график не отображается.

Вот скрипка, которую я попробовал.

http://jsfiddle.net/abnitchauhan/cenmohbw/

Answer 1

Вы забыли добавить ребенка в дерево DOM. Когда вы динамически создаете новый элемент HTML, его необходимо присоединить к существующему узлу в дереве DOM.

В Javascript вы можете сделать:

var existingNode = document.getElementById("content");
var newElement = document.createElement("div");
newElement.id = "someID";
existingNode.appendChild(newElement);

In jQuery, это проще:

$("#content").append(`<div id="someID"></div>`);

В вашем случае изменение будет выглядеть (только for l oop изменения) как:

for (var i = 0; i < len; i++) {
    console.log("I", i);
    $("#content").append(`<div id="container${i}"></div>`);
    // rest of your code