Question

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

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

我使用Dev Console检查了内部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>   				                         
<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

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

循环中的高亮图仅显示第一个图表数据

1 个答案: