Хорошо, причина в том, что вы добавили его в GridView, то есть повторите тот же идентификатор id="container"
, поэтому логично, что только первым является график.Поэтому, когда вы просите нанести данные на идентификатор, он находит только первый.
<ItemTemplate>
<div id="container" >
</div>
</ItemTemplate>
добавить разные идентификаторы в каждую строку базы для некоторого идентификатора базы данных, например: <div id="container1" >
, <div id="container2" >
, <div id="container3" >
альтернатива здесь
('#container').highcharts({
не используйте идентификатор, но добавьте некоторый класс и запишите их все, но вам все равно нужно добавить другую базу данных для некоторого идентификатора.
Решение
Как вы можете добавить некоторые параметры на стороне рендеринга, чтобы найти подходящие данные для каждой строки.
Прежде всего, визуализируйте div
и добавьте некоторые данные внутрьчто вы получаете с помощью javascript.
Итак, в GridView вы добавляете
<asp:TemplateField HeaderText="header" >
<ItemTemplate >
<%#getDivContainer(Container.DataItem)%>
</ItemTemplate>
</asp:TemplateField>
, а затем в коде отправляете div
с data-id
protected string getDateAndGraph(object oItem)
{
// read the id from your data set
var CurrentID = (int) DataBinder.Eval(oItem, "ID");
return string.Format("<div id="container_{0}" class="graph" data-id="{0}"></div>", CurrentID);
}
теперь на javascriptсторона, вы передаете каждый из предыдущих элементов и размещаете на них правильные данные, основываясь на id
// init all of them
$(function () {
$('.graph').highcharts({
// init
chart: { type: type, inverted: true },
title: { text: titleText },
.... rest of .....
})
});
// here you add the correct data to each line
$( ".graph" ).each(function( index, element ) {
chart = $(element).highcharts();
// now read the id, and load the appropriate data
MyDataID = $(element).data( "id" );
var hv = $('#hiddenvariable' + MyDataID).val();
var data = [JSON.parse(hv).map(item => parseInt(item))];
chart.addSeries({ data: data });
});