用Ajax和Json填充JQuery图
我正在尝试在我的MVC5应用程序中使用JQuery Flot Chart http://www.flotcharts.org/。目前，我只是想了解它们是如何工作的。我使用了创建条形图的示例代码：
$(document).ready(function () {
$(function () {
var data = [[0, 5],[1, 10],[2, 15],[3, 20],[4, 25],[5, 30]];
var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];
var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5
},
xaxis: {
axisLabel: "World Cities",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$.plot($("#placeholder"), dataset, options);
});
});如果我要使用JQuery图，我需要能够通过AJAX动态地拉取数据，而不是像上面那样硬编码到我的剃刀视图中。
我在控制器中创建了一个Action，它返回的数据与上面示例中硬编码的数据相同
[HttpGet]
public ActionResult GetTestData()
{
return Json(new[] { new[] { 0, 5 }, new[] { 1, 10 }, new[] { 2, 15 }, new[] { 3, 20 }, new[] { 4, 25 }, new[] { 5, 30 }, new[] { 6, 35 } },JsonRequestBehavior.AllowGet);
}然后，我修改了Razor View中的代码，注释掉了数据和绘图调用，并将它们替换为Ajax请求
//var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
//$.plot($("#placeholder"), dataset, options);
$.ajax({
type: "GET",
url: '@Url.Action("GetTestData")',
error: function () {
alert("An error occurred.");
},
success: function (data) {
$.plot($("#placeholder"), dataset, options);
}
});然后，此Ajax请求应调用控制器中的Json操作并返回GetTestData数据。但是，我在我的GetTestData操作上设置了一个断点，调试后，该操作永远不会被调用，因此，为了创建条形图，永远不会返回数据。
谁能帮我找出为什么我的Ajax代码不调用我的Action。
感谢您的反馈。
回答 3
Stack Overflow用户
发布于 2014-10-06 21:41:01
各位，问题是这行代码
var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];在我的Ajax调用之外。这意味着在这行代码中，变量data被赋值，但它并不存在。
因此，解决方案是将Flot Chart特定代码移到Ajax调用的成功函数中，如下所示
$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: '/Statistics/GetTestData/',
error: function () {
alert("An error occurred.");
},
success: function (data) {
//alert("Success.");
var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];
var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"], [4, "Beijing"], [5, "Sydney"]];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5
},
xaxis: {
axisLabel: "World Cities",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$.plot($("#placeholder"), dataset, options);
}
});希望这对其他人有所帮助。
Stack Overflow用户
发布于 2015-06-26 15:15:34
我只是和http://www.jqueryflottutorial.com/how-to-make-jquery-flot-ajax-update-chart.html一起来的
如果我想用本地的json数据更新图表，请看一下我的代码。
function GetData() {
$.ajaxSetup({ cache: false });
$.ajax({
url: "data.json",
dataType: 'json',
success: update,
error: function () {
setTimeout(GetData, updateInterval);
}
});
}data.json
{
"cpu":10,
"core":30,
"disk":50
} 如果我想在json文件中添加更多数据，它将不会显示输出。有没有办法在json文件中动态生成包含更多数据的图表？
{
"cpu":70,
"core":20,
"disk":10
},
{
"cpu":90,
"core":20,
"disk":80
},
{
"cpu":50,
"core":10,
"disk":60
} Stack Overflow用户
发布于 2016-09-19 02:06:44
这个例子可能会有所帮助。如何使用ajax：Receive data via AJAX with jQuery Flot更改简单的jquery flot图表
https://stackoverflow.com/questions/26214558
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号