我正在尝试在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#网络方法。
[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();
}
}
在这里,我的网络方法根据文档正确生成了字符串。如果我在图表js中静态使用生成的字符串,则图表将正确生成。但是,当我尝试通过调用后端方法提供相同的字符串时,它给了我Uncaught TypeError:无法读取未定义的属性“ length”
我不确定为什么相同的字符串会像这样。这与C#字符串和Java脚本字符串的兼容性有关吗?
参考方案
我发现了这个问题。这是使您可以通过使用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;
}
}
Javascript-Urls的奇怪字符串比较行为 - javascript最近,在编写我无法理解的javascript时遇到了字符串比较的问题。我从完全相同的网址创建了两个字符串,当我比较它们时返回false,但是在重新分配相同的字符串后,比较返回true。这是我的示例:var str1 = "http://google.com/"; var str2 = "http://google.com/…
Javascript-从当前网址中删除查询字符串 - javascript单击提交按钮后,我需要从网址中删除查询字符串值。我可以用jQuery做到这一点吗?当前网址:siteUrl/page.php?key=value 页面提交后:siteUrl/page.php 实际上,我已经从另一个带有查询字符串的页面着陆到当前页面。我需要在页面首次加载时查询字符串值以预填充一些详细信息。但是,一旦我提交了表格,我就需要删除查询字符串值。我已…
在JavaScript函数中转义引号 - javascript我正在尝试将变量传递给javascript函数。根据用户的选择,它可以是文本或图像。这里已经讨论了类似的问题,但我无法解决。在php中,我这样编码:if ($choice == 1) { $img = '<img src = "../folder/'.$_SESSION["img"].'…
如何调用超链接单击中包含单引号的消息的JavaScript警报? - javascript我陷入了javascript问题。我正在使用C#编写可以调用javascript来显示警报消息的超链接。请参阅下面的代码以了解它是如何完成的:首先,这是C#从服务器端编写的代码://Server side code string myHyperlink = "<a href='#' onclick=\"alert…
如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript我想在JavaScript中使用模板变量:我的问题是在javascript代码中使用for循环,for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码: {% block extra_javascript %} <script src="/static/js…