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可以解決這個問題。