Highchart数据在gridview的每一行上显示,单击按钮时会显示不同的数据

时间:2019-02-19 10:41:24

标签: javascript c# html highcharts

我在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].cr_fe_KPI_RPT_Summary", 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 });

 });
}

1 个答案:

答案 0 :(得分:1)

你有没有解决过这个问题?

我猜您没有发布所有代码,或者您对其进行了编辑,而遗漏了信息。

SerializedBoxChart 方法中,您创建两 (2) 个 List<String> 变量。每次通过您的 while loop 后都会清除一个 chartValues,而另一个 chartValues2 从未使用过。

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

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

如果您的 HTML 页面上有存储位置,例如 listView1listView2,您的代码将如下所示:

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