使用Chart.js创建图表使用C＃字符串会导致问题(Create Charts with Chart.js Using C# string causes problems)

使用Chart.js创建图表使用C＃字符串会导致问题(Create Charts with Chart.js Using C# string causes problems)

我想在我的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 = r.d; 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<datasets>(); 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脚本字符串兼容性有关吗？

I am trying to create charts using Chart Js in my asp.net application. I am fetching data from code database and and generating the string as per the documentation in back end. And then i am calling that web method to fetch the chart data and render it on page.

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 = r.d; 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.'); } }); }

Here is my c# web method.

[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<datasets>(); 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(); } }

Here my web method is generating the string correctly as per the documentation. If i use the generated string statically in chart js then the chart is getting generated correctly. But when i try to provide the same string by calling the back end method then it gives me Uncaught TypeError: Cannot read property 'length' of undefined

I am not sure why it is behaving like this for the same string. Is this something related to C# string and java script string compatibility ?

最满意答案

我想出了这个问题。 这是一个代码，它允许您通过使用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 = r.d; 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<datasets>(); 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; } }

I figured out this problem. Here is the code which lets you create a chart by getting data from database using 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 = r.d; 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.'); } }); }

Here is the web method which provides data to charts.

[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<datasets>(); 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; } }