Highchart在循环中只显示第一个图表数据

Question

我创建了一个循环，在同一时间迭代两个元素列表并为每个元素显示适当的Highchart。

问题是，对于第一个列表（model.getFirstList），所有3个highchart都显示没有问题。但是对于第二个列表（model.getSecondList），只有FIRST Charts在页面上，第二个和第三个 - 不会捕获任何数据。

我检查使用开发控制台内的HTML，并注意到在div必须处理的图表，对存在的页面上的图表看起来是这样的：

<div id="ChannelData" class="a-section a-spacing-none va-metrics-main-graph" data-highcharts-chart="5">

但是对于那些图表没有在页面上显示的是这样的：

<div id="ChannelData" class="a-section a-spacing-none va-metrics-main-graph">

所以它没有属性data-highcharts-chart，以及具有所有属性来构建图表的内部div。尽管javascript还提供了缺少图表所需的全部数据。

这是我的代码，在那里我遍历两个列表中的一个循环，并显示相应的列表项，图表

<c:forEach items="${model.getFirstList}" varStatus="loop" > 
 
<a:gridColumn gridUnits="3"> 
 
<mt:TimeSeriesDataGraphtimeSeriesData="${model.{model.getFirstList[loop.index]}" /> 
 
<input type="button" value="Channels Metrics" onclick="getChannelsData('${loop.index}')"/> 
 
</a:gridColumn> \t \t \t \t       
 
<a:gridColumn gridUnits="3"> 
 
<mt:TimeSeriesDataGraph timeSeriesData="${model.getSecondList[loop.index]}" /> 
 
<input type="button" value="All Metrics" onclick="getAllData('${loop.index}')"/> 
 
</a:gridColumn> 
 
</c:forEach>

Answer 1

已经发生的问题，因为所有的HTML元素我决定renderTo（）我的图表具有相同的ID。给他们不同的id可以解决这个问题。