javascript - Highchart使用javascript使用div元素在gridview的每一行上显示

Question

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;

Answer 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 });

});