1

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

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

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

请任何人都可以帮助我这样做。

提前致谢。

4

2 回答 2

3

这是演示代码

在后面的代码中

    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" />
于 2013-07-12T05:05:56.893 回答
0

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

于 2013-07-12T02:47:15.163 回答