使用webmethod绑定动态图表

时间:2016-07-27 06:59:09

标签: jquery html5 charts html5-canvas

我正在尝试使用webmethod绑定动态图表,如下面的代码所示。 webmethod返回数据正确但我无法将其动态绑定到datapoints

  <script>
        function RealCallWM() {
            $.ajax({
                type: "POST",
                url: "Home.aspx/getCityPopulation",
                data: null,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                success: function (data, status) {
                    var chart = new CanvasJS.Chart("chartContainer", {
                        title: {
                            text: "Stores Sales chart"
                        },

                        data: [//array of dataSeries              
                          { //dataSeries object

                              /*** Change type "column" to "bar", "area", "line" or "pie"***/
                              type: "column",
                              dataPoints: [

                               { label: "banana", y: 18 },
                              { label: "orange", y: 29 },

                              ]
                          }
                        ]
                    }
                )
                },
                failure: function (data) {
                    alert(data.d);
                },
                error: function (data) {
                    alert(data.d);
                }
            });
        }
    </script>

我需要使用数据绑定datapoints动态。还有web方法如下图所示。有什么帮助吗?

public string DepartmentName { get; set; }
public decimal  Value { get; set; }
public string id { get; set; }
[WebMethod]
  public static List<MakeChart> getCityPopulation()
{
    List<MakeChart> p = new List<MakeChart>();
    string connString = System.Configuration.ConfigurationManager.ConnectionStrings["SMA_DEVEntities"].ConnectionString;
     SqlConnection cn = new SqlConnection(connString) ;

        string myQuery = "select sum(AMTSALES) as value,[NAME]  from  [SMA_DEV].[dbo].[STORE_SALES] where RPTDATE is not null group By ID  ,NAME ";
        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = myQuery;
        cmd.CommandType = CommandType.Text;

        cmd.Connection = cn;
        cn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        StringBuilder sb = new StringBuilder();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                sb.Append("{");
                System.Threading.Thread.Sleep(50);
                string color = String.Format("#{0:X6}", new Random().Next(0x1000000));
                sb.Append(string.Format("text :'{0}', value:{1}, color: '{2}'", dr["NAME"].ToString(), dr["value"].ToString(), color));
                sb.Append("},");
                MakeChart cpData = new MakeChart();
                cpData.DepartmentName = dr["NAME"].ToString();
                cpData.Value = Convert.ToDecimal(dr["value"].ToString());
                p.Add(cpData);
                cpData = new MakeChart();
            }
        }
        sb = sb.Remove(sb.Length - 1, 1);
        sb.Append("]");

        return p;
    cn.Close();

}

0 个答案:

没有答案