具有相同數據的多個圖表未在同一頁面加載：Highcharts

Question

我正在嘗試在自定義編號中顯示具有相同數據的 Highchart。 有時，假設我想在同一頁面中動態顯示圖表 2 次。

我所做的是將圖表設置在 for 循環中，在該循環中我可以動態地多次重復圖表。

這是我嘗試過的腳本。

    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);

在 jQuery 中，它更容易：

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

在您的情況下，更改看起來像（僅for循環更改）為：

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