在C#中，我们可以使用ASP.NET MVC和AJAX技术来实现动态图表绘制。这里我们将使用Highcharts库来创建交互式图表。首先，确保已经安装了ASP.NET MVC项目。
在你的项目中，打开_Layout.cshtml文件，然后在<head>标签内添加以下代码：
在项目的Controllers文件夹中，创建一个名为ChartController.cs的新文件。在该文件中，添加以下代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace YourProjectName.Controllers
{
public class ChartController : Controller
{
// GET: Chart
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
var data = new List<int> { 5, 7, 3, 2, 8 };
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
请确保将YourProjectName替换为你的项目名称。
在Views文件夹中，右键单击Controllers文件夹，然后选择"Add" -> “View”。将视图命名为"Index"，并将其放在名为"Chart"的新文件夹中。在生成的Index.cshtml文件中，添加以下代码：
@{
ViewBag.Title = "Chart";
}
<h2>Chart</h2>
<div id="container" style="width: 100%; height: 400px;"></div><script>
$(document).ready(function () {
$.ajax({
url: '/Chart/GetData',
type: 'GET',
dataType: 'json',
success: function (data) {
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Dynamic Chart Example'
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
yAxis: {
title: {
text: 'Values'
}
},
series: [{
name: 'Data',
data: data
}]
});
}
});
});
</script>
在RouteConfig.cs文件中，确保以下代码存在于RegisterRoutes方法中：
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
现在，运行项目并导航到/Chart。你应该看到一个动态生成的折线图。你可以根据需要修改GetData方法以从数据库或其他数据源获取数据。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
