问题描述
C＃gridview有一个templatefield，其中包含带有ID容器的单个div。 我有以下javascript，可创建highchart图，并将该图放在前端的该div中。 由于某种原因，图形仅显示在gridview的第一行上，而不是每一行上。 我的最终目标是为每行显示一个箱形图。 箱形图使用的数据已从数据库中检索出来，并使用JSON.PARSE解析为javascript，这可以正常工作。 我需要使图形在gridview的每一行上输出：
JS：
function CreateBoxPlot() {
var hv = $('#hiddenvariable').val();
alert(hv);
var chart;
var titleText = 'Test Chart Title';
var subTitleText = 'Test Chart Subtitle';
var type = 'boxplot';
var data = [JSON.parse(hv).map(item => parseInt(item))]; //Doesnt work in IE
console.log(data);
$(function () {
$('#container').highcharts({
chart: { type: type, inverted: true },
title: { text: titleText },
subtitle: { text: subTitleText },
legend: { enabled: false },
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
pointWidth: 50
}
},
xAxis: {
visible: false
},
yAxis: {
visible: true,
title: {
text: 'Values'
},
plotLines: [{
value: 80,
color: 'red',
width: 2
}]
}
});
chart = $('#container').highcharts();
chart.addSeries({ data: data });
});
}
ASPX：
<asp:TemplateField HeaderText="DaysGraph" HeaderStyle-Width="30%" >
<ItemTemplate>
<div id="container" >
</div>
</ItemTemplate>
</asp:TemplateField>
C＃
SqlDataAdapter da = new SqlDataAdapter(cmd);
cmd.CommandType = CommandType.StoredProcedure;
cn.Open();
SqlDataReader reader = cmd.ExecuteReader();
var chartValues = new List<string>();
var chartValues2 = new List<string>();
string str = reader["ChartData"].ToString();
string[] strList = str.Split(','); //seperate the hobbies by comma
// convert it in json
dataStr = JsonConvert.SerializeObject(strList, Formatting.None);
hiddenvariable.Value = dataStr;
1楼
好的，原因是因为您已将其添加到GridView中，即重复相同的id id="container" ，所以逻辑上只有第一个是图。
因此，当您要求将数据绘制到ID时，它只会找到第一个。
<ItemTemplate>
<div id="container" >
</div>
</ItemTemplate>
在某些数据库ID的基础上，在每行上添加不同的ID，例如： <div id="container1" > ， <div id="container2" > ， <div id="container3" >
替代这里
('#container').highcharts({
不要使用ID，而是添加一些类并捕获它们，但是您仍然需要在ID上添加不同的数据库。
解
如何在渲染侧添加一些参数以查找每行的适当数据。
首先，渲染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 });
});