Question

我有一个带有templatefield的asp.net gridview，它的每一行都包含一个按钮。此按钮具有一个数据目标属性，可打开一个模式。模态包括一个div，其中包含ID容器。该div应该基于网格视图中的数据显示高图框图。我有一列说明，我希望它成为标题。我也有一列称为图表数据。第一行的示例是2,6,10,13,17，将其作为要发送的数据发送。如果我进行硬编码，则箱形图可以正常工作。我需要它查看特定的行并根据单击哪个按钮进行绘制。用于创建箱形图的功能使用javascript，当前在页面加载时运行。

我有一个按钮单击方法，该方法从网格视图检索数据并将其存储在一个变量中。如果我再调用以下方法，SerializedBoxChart（）;它从字符串Ito JSON中检索解析数据，然后将一个隐藏变量设置为此值。当我运行代码时，箱形图根本不会运行。如果我移动SerializedBoxChart（）;进入c＃代码的页面加载，并更改方法，使其直接在数据库上运行，它遍历每一行并为所有行绘制最后一行，这不是我想要的。我希望它根据我单击的行来绘制。

ASP.NET：

<asp:TemplateField HeaderText="AvgDaysTaken" SortExpression="AvgDaysTaken">
    <itemtemplate>
        <asp:Button type="button" runat="server" id="AvgDaysTaken" class="btn btn-primary" data-toggle="modal" data-target="#myBoxPlot"  Text='<%# Eval("AvgDaysTaken") %>' />
    </itemtemplate>
</asp:TemplateField>

ASP.NET

protected void ViewADTBP_Click(object sender, EventArgs e)
{
    Button btn = (Button)sender;
    GridViewRow row = (GridViewRow)btn.NamingContainer;

    string measurement = row.Cells[1].Text;
    string chartdata = row.Cells[16].Text;

    if (measurement != "total")
    {
        SerializedBoxChart(measurement, chartdata);
    }
}

public void SerializedBoxChart(string measuredesc, string chartdata)
{
    string str = chartdata;
    string[] strList = str.Split(','); //seperate the hobbies by comma

    // convert it in json
    dataStr = JsonConvert.SerializeObject(strList, Formatting.None);

    hiddenvariable.Value = dataStr;
    hiddenvariablemeasuredesc.Value = measuredesc;
}

JS：

function CreateBoxPlot() {
    var hv = $('#hiddenvariable').val();
    console.log(hv);
    var hvmeasure = $('#hiddenvariablemeasuredesc').val();
    console.log(hvmeasure);

    var chart;
    var titleText = hvmeasure;
    var subTitleText = 'Test Chart Subtitle';
    var type = 'boxplot';
    var data = [JSON.parse(hv).map(item => parseInt(item))]; //Doesnt work in IE

    var $container = $('<div>').appendTo(document.body);

    $(function () {
        $('#container').highcharts({
            chart: { type: type, inverted: true},
            title: { text: hvmeasure },
            subtitle: { text: subTitleText },
            renderTo: $container[0],
            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 });
    });
}

Highchart出现在模式查看按钮单击的gridview行上

0 个答案: