如何将ms-sql数据传递给jquery float

本文关键字：jquery float 数据 ms-sql | 更新日期: 2023-09-27 18:22:12

我正在使用asp.net c#并使用MS SQL作为数据库开发web应用程序。在我的应用程序中，我想绘制间接销售的图表。为此，我发现了一个非常好的jquery插件，名为flot。

但问题是，我不知道如何将我的sql数据传递给flot。我有一个表，它有两列日期（DateTime）和销售额的数量（int）。我想要y轴上的销售额和x轴上的日期。

我在网上搜索了很多，但没有找到太多关于如何将MSSQL数据传递给flot的帮助。

请任何人都能帮我这么做。

提前谢谢。

如何将ms-sql数据传递给jquery float

这里是演示代码

在后面的代码中

    public class chartdata
    {
        public string Date { get; set; }
        public int Sales { get; set; }
    }
    [System.Web.Services.WebMethod]//public static web method in code behind
    public static List<chartdata> GetData() //int StartRowindex, 
    {
        List<chartdata> myResult= new List<chartdata>();
        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["demo"].ConnectionString))
        {
            //string sqlString = "SelectbyYearTotalProductAssign";
            string sqlString = "SelectbyYearTotalProductAssign1";
            using (SqlCommand cmd = new SqlCommand(sqlString, conn))
            {
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                conn.Open();
                SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                while (rdr.Read())
                {
                    chartdata obj = new chartdata();
                    obj.Sales = Convert.ToInt32(rdr["Sales"]);
                    obj.Date = rdr["Date"].ToString();
                    myResult.Add(obj);
                }
                conn.Close();
            }
        }
        return myResult;
    }

你的html

<div id="chart1"></div>
 <script language="javascript" type="text/javascript">
     jQuery(document).ready(function () {
         DrowChart();
     });
     function DrowChart() {
         jQuery("#chart1").html('');
         var list12 = [];
         jQuery.ajax({
             type: "POST",
             url: "Default.aspx/GetData",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             async: false,
             data: "{}",
             success: function (data) {
                 jQuery.map(data.d, function (item) {
                     var list = [];
                     list.push("'" + item.Date + "'");
                     list.push(item.Sales);
                     list12.push(list);
                 });
                 var plot1 = jQuery.jqplot('chart1', [list12],
                                            {
                                                seriesDefaults: {
                                                    // Make this a pie chart.
                                                    renderer: jQuery.jqplot.PieRenderer,
                                                    rendererOptions: {
                                                        // Put data labels on the pie slices.
                                                        // By default, labels show the percentage of the slice.
                                                        showDataLabels: true
                                                    }
                                                },
                                                legend: { show: true, location: 'e' }
                                            }
                                          );

             }
         });
     }

</script>
<script type="text/javascript" src="chartLib/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="chartLib/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="chartLib/jquery.jqplot.min.css" />

您可以使用jQueryAjax调用以JSON格式从服务器端获取flot数据。如果成功，则解析JSON对象，并使用占位符div、解析的JSON结果和任何选项调用$.plot。

相关文章：