在gridview上的每一行Highchart数据以在按钮单击打开模式上显示不同的数据

Question

我在 ASP.NET 中有一个 gridview，其中有一个 asp:templatefield，每行都包含一个按钮。在按钮上，我有一个数据目标属性，它是一个模式。

在 gridview 行绑定上，我获取行的 ID 并调用 SerializedBoxChart() 方法，该方法放入行的 ID 并检索数据。但是，它看起来像循环遍历每一行，我最终得到了gridview每一行的最后一行数据。当我单击按钮时，它会打开带有最终行数据的模式。我正在尝试根据 measureID 为每一行分配数据，当您单击按钮时，它会打开该行数据。

当 highcharts javascript 运行脚本并将其放置在 div 中但不知道如何解决此问题时，我感觉这与容器上的冲突 ID 有关。

<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>

模态代码，其中包含一个带有 ID 容器的 div，其中将放置图表

<div class="container">
   <!-- Modal -->
   <div class="modal fade" id="myBoxPlot" role="dialog">
      <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
               <div id="container" >
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
</div>

使用c#获取箱线图的数据

 public void SerializedBoxChart(int measureid)
{

    string connectionstring = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
    SqlConnection cn = new SqlConnection(connectionstring);
    SqlCommand cmd = new SqlCommand("[dbo].so", cn);
    cmd.Parameters.AddWithValue("@SubTeamNo", SubTeam);
    cmd.Parameters.AddWithValue("@Month", Month);
    cmd.Parameters.AddWithValue("@Year", Year);
    cmd.Parameters.AddWithValue("@ReportPeriod", ReportPeriod);
    cmd.Parameters.AddWithValue("@controlID", ControlID);
    cmd.Parameters.AddWithValue("@PracticeGroupID", PracticeGroup);
    cmd.Parameters.AddWithValue("@Instructor", SearchInput.Text);
    cmd.Parameters.AddWithValue("@MeasureID", measureid) ;
    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>();

    if (reader.HasRows)
    {
        while (reader.Read())
        {
            string name = reader.GetString(0);

            if (name != "Total")
            {


                string str = reader["ChartData"].ToString();
                string a = reader["MeasureDesc"].ToString();

                string[] strList = str.Split(',');

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

                hiddenvariable.Value = dataStr;
                hiddenvariablemeasuredesc.Value = a;

                chartValues.Clear();
            }
        }
    }

    else
    {

    }

    reader.Close(); // close the reader
    cn.Close();



}

用于创建箱线图的 javascript：

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

 });
}

Answer 1

你解决过这个问题吗？

我猜你没有发布所有代码，或者你编辑了它，留下了信息。

在 SerializedBoxChart 方法中，您创建了两 (2) 个 List<String> 变量。每次通过您的while loop 后，一个 chartValues 都会被清除，而另一个 chartValues2 则永远不会使用。

我怀疑这是您试图保留的数据。

不要将此信息保存在临时的List<String> 变量中，您需要在您的页面上有一个可以发送数据的 HTML 列表。

如果您的 HTML 页面上有存储位置，例如 listView1 和 listView2，您的代码将如下所示：

public void SerializedBoxChart(int measureid) {

    var list1 = (ListView)FindControl("listView1");
    var list2 = (ListView)FindControl("listView2");

    if ((list1 != null) && (list2 != null)) {
        string connectionstring = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
        var chartValues = new List<string>();
        var chartValues2 = new List<string>();
        using (var cmd = new SqlCommand("[dbo].cr_fe_KPI_RPT_Summary", new SqlConnection(connectionstring))) {
            cmd.Parameters.AddWithValue("@SubTeamNo", SubTeam);
            cmd.Parameters.AddWithValue("@Month", Month);
            cmd.Parameters.AddWithValue("@Year", Year);
            cmd.Parameters.AddWithValue("@ReportPeriod", ReportPeriod);
            cmd.Parameters.AddWithValue("@controlID", ControlID);
            cmd.Parameters.AddWithValue("@PracticeGroupID", PracticeGroup);
            cmd.Parameters.AddWithValue("@Instructor", SearchInput.Text);
            cmd.Parameters.AddWithValue("@MeasureID", measureid);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Connection.Open();
            using (var reader = cmd.ExecuteReader()) {
                if (reader.HasRows) {
                    while (reader.Read()) {
                        string name = reader.GetString(0);
                        if (name != "Total") {
                            string str = reader["ChartData"].ToString();
                            string a = reader["MeasureDesc"].ToString();

                            chartValues.Add(str);
                            chartValues2.Add(a);

                            string[] strList = str.Split(',');

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

                            hiddenvariable.Value = dataStr;
                            hiddenvariablemeasuredesc.Value = a;

                        }
                    }
                }
                // reader.Close(); don't need to close in a USING statement
            }
        }
        list1.DataSource = chartValues;
        list1.DataBind();
        list2.DataSource = chartValues2;
        list2.DataBind();
    }
}