如何使用chart.js在jQuery中使用json动态绑定图表

Question

我正在使用Chart.js jQuery插件来创建条形图。我想创建一个动态图表。我想使用JSON使用jQuery绘制图表。如何将动态数据集设置为chart.js条形图。

这是我在aspx.cs中的代码

[WebMethod]
public static string BindItemStatusMasterChart(long longCustomerID)
{
    List<TollPlus.TBOS.ServiceDataContract.Retailer.Response.RetailerDashBoard> objItemStatusList = null;
    StringBuilder SB = null;
    List<TollPlus.TBOS.ServiceDataContract.Retailer.Response.RetailerItemsByItemStatusResponse> objcommonlist = null;
    RetailerService.MessageObjects.ResponseObject objResponseObjectMaster = null;

    using (ServiceClient<IRetailerService> objRetailerServiceClient = new ServiceClient<IRetailerService>(System.Web.Configuration.WebConfigurationManager.AppSettings["RetailerService"]))
    {
        objResponseObjectMaster = objRetailerServiceClient.Proxy.Get(TollPlus.TBOS.Enums.ServiceActivityType.GetItemStatusCountMaster, (object)longCustomerID, longCustomerID);

        if (objResponseObjectMaster.Result && objResponseObjectMaster.ResultValue != null)
        {
            objcommonlist = new List<TollPlus.TBOS.ServiceDataContract.Retailer.Response.RetailerItemsByItemStatusResponse>();
            string[] value = null;
            objItemStatusList = objResponseObjectMaster.ResultValue as List<TollPlus.TBOS.ServiceDataContract.Retailer.Response.RetailerDashBoard>;

            if (objItemStatusList.Count > 0)
            {
                SB = new StringBuilder();

                for (int intRA = 0; intRA < objItemStatusList.Count; intRA++)
                {
                    value = new string[2];
                    value[0] = objItemStatusList[intRA].ItemStatusDesc;
                    value[1] = objItemStatusList[intRA].TotalCount.ToString();

                    SB.Append(value);
                }
            }
        }
    }             

    return SB.ToString();
 }

在js文件中：

function BindCharts(url) {
    $.ajax({
        type: "POST",
        url: url,
        data: "{'longCustomerID': '" + $('input[id$=hdnCustomerID]').val() + "'}",
        contentType: "application/json",
        dataType: "json",
        success: function (r) {
if (r.d.length > 0) {
$("#dvChart").html("");
                $("#dvLegend").html("");
                var el = document.createElement('canvas');
                $("#dvChart")[0].appendChild(el);
                //Fix for IE 8
                if ($.browser.msie && $.browser.version == "8.0") {
                    G_vmlCanvasManager.initElement(el);
                }
                var ctx = el.getContext('2d');
                var data = eval('(' + JSON.stringify(r.d) + ')');
var userStrengthsChart = new Chart(ctx).Bar(JSON.stringify(r));
}
}
 });
}