Javascript 一页多个高股价图表

我试图让页面显示动态数量的图表，我从另一个库中查看了这个方法，但是鉴于缺乏js和html知识，我无法转换为highcharts

我想得到以下信息：

window.onload=函数（）{
var container=document.querySelector（'.container'）；
somedata.forEach（函数（快照）{
var div=document.createElement（'div'）；
div.classList.add（'chart-container'）；
子容器（div）；
var config=createConfig（快照）；
新的Highcharts.stockChart（容器，配置）；
});
};

我发现了一个使用php的类似解决方案，也许您可以将此代码转换为您的需要

代码如下：

        <script>
        titles = <?php echo json_encode($graphTitles)?>;
        //Loop through the graphs
        for (var graphNO = 0; graphNO < titles.length; graphNO++)
        {                               
           //CREATE NEW CONTAINER
            var container = document.createElement('div'); 
            document.body.appendChild(container);er);

            dates = <?php echo json_encode($recivedDates);?>[titles[graphNO]];
            //I EXTRACT A FEW  MORE ARRAYS THE SAME METHOD
              $(container).highcharts({
                  title: {
                      text: titles[graphNO]
                  },
                  xAxis: {
                      categories: dates
                  },
                  series: [{
                      type: 'column',
                      color: 'gold',
                      name: 'Created Issues',
                      data: createdIssues.map(Number)
                  }, 
                   //MORE COLUMN'S AND SOME SPLINES. IT ALL WORKS AS EXPECTED
              });
            });
    </script>

头衔=；
//循环浏览图表
for（var graphNO=0；graphNO

我发现了一个使用php的类似解决方案，也许您可以将此代码转换为您的需要

代码如下：

        <script>
        titles = <?php echo json_encode($graphTitles)?>;
        //Loop through the graphs
        for (var graphNO = 0; graphNO < titles.length; graphNO++)
        {                               
           //CREATE NEW CONTAINER
            var container = document.createElement('div'); 
            document.body.appendChild(container);er);

            dates = <?php echo json_encode($recivedDates);?>[titles[graphNO]];
            //I EXTRACT A FEW  MORE ARRAYS THE SAME METHOD
              $(container).highcharts({
                  title: {
                      text: titles[graphNO]
                  },
                  xAxis: {
                      categories: dates
                  },
                  series: [{
                      type: 'column',
                      color: 'gold',
                      name: 'Created Issues',
                      data: createdIssues.map(Number)
                  }, 
                   //MORE COLUMN'S AND SOME SPLINES. IT ALL WORKS AS EXPECTED
              });
            });
    </script>

头衔=；
//循环浏览图表
for（var graphNO=0；graphNO

我不知道这是否足够，但它对我有效

函数createConfig（快照）{
设profitInUSDT=snapshot.profitInUSDT，
profitInBTC=snapshot.profitInBTC，
xAxisDate=snapshot.date；
profitInUSDT=profitInUSDT.map（（val，i）=>[xAxisDate[i]，val]）
profitInBTC=profitInBTC.map（（val，i）=>[xAxisDate[i]，val]）
返回{
标题：{
是的，
文本：“”
},
导航器：{
已启用：false
},
范围选择器：{
选定：6，
启用：false，
},
滚动条：{
已启用：false
},
亚克斯：{
反面：错，
标签：{
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
},
},
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
图例：{
启用：对，
},
工具提示：{
pointFormat:“{series.name}{point.y}%”，
数值小数：2，
分裂：对
},
系列：[{
名称：“以美元计算的利润”，
数据：profitInUSDT，
颜色：“#21a27c”，
工具提示：{
数值小数：2
}
},
{
名称：“BTC中的利润”，
数据：profitInBTC，
颜色：'#f79413'，
工具提示：{
数值小数：2
}
}
]
};
}
window.onload=函数（）{
var cont=document.querySelector（'.container'）；
[{“名称”：“测试”，“描述”：“测试”，“日期”：[15772072031000157720680800001577210408000]，“profitInBTC”：[0.0，-0.79,0.87]，“profitInUSDT”：[0.0，-0.51,0.36]，{“名称”：“puz”，“描述”：“期货”，“日期”：[15866530221258226680057271582671603990]，“profitInBTC”：[0.0，-0.5,14.72]，“profitInUSDT”：[15.4,15.41]。]{
var container=document.createElement（'div'）；
container.className='chart container'；
cont.append（容器）；
文件.正文.附件（续）；
var config=createConfig（快照）；
股票图表（容器，配置）；
});
}；

.chart容器{
宽度：80%；
左边距：40px；
右边距：40px；
边缘底部：40px；
}
.集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
}

---

我不知道这是否足够，但它对我有效

函数创建
var mainOptions = {
  chart: {
    backgroundColor: 'green'
  }
}

var data = [];


for (var i = 0; i < 5; i++) {
//create div dynamically
  var iDiv = document.createElement('div');
  iDiv.id = 'container' + i;
  document.getElementsByTagName('body')[0].appendChild(iDiv);

  data.push(Math.random() * i)

//create charts
  Highcharts.stockChart(iDiv.id, Highcharts.merge(mainOptions, {
    series: [{
      data: data
    }]
  }))
}