使用Chart.js创建图表使用C＃字符串会导致问题

我想在我的asp.net应用程序中使用Chart Js创建图表。 我从代码数据库中获取数据，并根据后端的文档生成字符串。 然后我调用该Web方法来获取图表数据并在页面上呈现它。

function LoadVarianceChart() { var data; $.ajax({ type: "POST", url: "Analysis.aspx/GetVarianceChart", data: "", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { $("#dvVarianceChart").html(""); var obj = rd; console.log(obj); data = obj; var el = document.createElement('canvas'); $("#dvVarianceChart")[0].appendChild(el); //Fix for IE 8 if ($.browser.msie && $.browser.version == "8.0") { G_vmlCanvasManager.initElement(el); } var ctx = el.getContext('2d'); ctx.canvas.width = 300; ctx.canvas.height = 300; var userStrengthsChart; userStrengthsChart = new Chart(ctx).Bar(data); }, failure: function (response) { alert('There was an error.'); } }); } 

这是我的c＃web方法。

  [WebMethod] public static string GetVarianceChart() { DataSet ds = Utility.ExecuteDataTable("GetAdvarienceByBrandFamily", null); VarianceChartModel bar = new VarianceChartModel(); bar.labels = ds.Tables[0].Rows[0][0].ToString().Split(','); bar.datasets = new List(); for (int i = 1; i < ds.Tables.Count; i++) { datasets dataset = new datasets(); dataset.data = Array.ConvertAll(ds.Tables[i].Rows[0][0].ToString().Split(','), decimal.Parse); dataset.label = "new"; dataset.fillColor = "rgba(220,220,220,0.5)"; dataset.highlightFill = "rgba(220,220,220,0.75)"; dataset.highlightStroke = "rgba(220,220,220,1)"; dataset.strokeColor = "rgba(220,220,220,0.8)"; bar.datasets.Add(dataset); } var serializer = new JsonSerializer(); var stringWriter = new StringWriter(); var writer = new JsonTextWriter(stringWriter); writer.QuoteName = false; serializer.Serialize(writer, bar); writer.Close(); var json = stringWriter.ToString(); return json.ToString(); } } 

这里我的web方法正在根据文档正确生成字符串。 如果我在图表js中静态使用生成的字符串，那么图表将正确生成。 但是当我尝试通过调用后端方法提供相同的字符串时它会给我一个未捕获的TypeError：无法读取未定义的属性’length’

我不确定为什么它对于相同的字符串表现得像这样。 这与C＃字符串和java脚本字符串兼容性有关吗？

Answer 1

我想出了这个问题。 这是一个代码，它允许您通过使用asp.net从数据库获取数据来创建图表。

 function LoadChart1() { var data; $.ajax({ type: "POST", url: "Analysis.aspx/GetChart1", data: "{account: '" + $("[id*=ddlAccount]").val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { $("#dvChart").html(""); $("#dvLegend").html(""); var obj = rd; data = JSON.parse(obj); 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'); ctx.canvas.width = 500; ctx.canvas.height = 500; var userStrengthsChart; userStrengthsChart = new Chart(ctx).Bar(data); }, failure: function (response) { alert('There was an error.'); } }); } 

这是为图表提供数据的Web方法。

 [WebMethod] public static string GetChart1(string account) { SqlParameter[] param = new SqlParameter[] { new SqlParameter("@account", account) }; DataSet ds = Utility.ExecuteDataTable("GetChart1", param); if (ds.Tables[0].Rows.Count != 0) { VarianceChartModel bar = new VarianceChartModel(); bar.labels = ds.Tables[0].Rows[0][0].ToString().Split(','); bar.datasets = new List(); for (int i = 1; i < ds.Tables.Count; i++) { string data = ds.Tables[i].Rows[0][0].ToString(); if (!string.IsNullOrEmpty(data)) { datasets dataset = new datasets(); dataset.data = Array.ConvertAll(data.Split(','), decimal.Parse); dataset.label = "new"; dataset.fillColor = "rgba(255, 102, 0,0.5)"; dataset.highlightFill = "rgba(255, 102, 0,0.75)"; dataset.highlightStroke = "rgba(255, 102, 0,0.50)"; dataset.strokeColor = "rgba(255, 102, 0,0.8)"; bar.datasets.Add(dataset); } } var serializer = new JsonSerializer(); var stringWriter = new StringWriter(); var writer = new JsonTextWriter(stringWriter); // writer.QuoteName = false; serializer.Serialize(writer, bar); writer.Close(); var json = stringWriter.ToString(); return json.ToString(); } else { return null; } } 

Answer 2

 Here is the code it worked for me.For the bar chat  ---cs file //GetDatachat for chart search data [WebMethod] public static List