C#MVC5 JavaScript Chart.js饼图，可从SQL Server数据库实时更新，无需刷新

我已经使用chart.js创建了一个饼图，数据是使用entity framework从SQL server数据库中获取的。这是在控制器中完成的

namespace ChartJsDatabase.Controllers
{
    public class ChartController : Controller
    {
        //============ The Object Created here is used to get the database connection  =============
        CSharpCornerEntities entities = new CSharpCornerEntities();
        //==========================================================================================
        // GET: Chart
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PieChart()
        //============= This Action Result Requires ===============
        //============= String Database Query =====================
        {
            using (entities)//;
            {
                var studentName = entities.Database.SqlQuery<PlannedVsActualModel>(@"SELECT [Planned], [Actual] FROM [dbo].[PlanVsActual]").ToList();
                return Json( studentName, JsonRequestBehavior.AllowGet);
            } 
        }     
    }
}

---

当SQL Server数据库值发生更改时，我需要更新饼图。我们不打算刷新整个页面，只刷新图表，它应该在连续的时间间隔内自动发生。

很简单，真的。只需使用

chart.config

编辑其属性，然后运行

chart.update（）

---

这里有更多信息：

您可以通过多种方式实现它，这里是一个局部视图

      a) Create a partial view  and include it  with your page 
            <Div id="pieChart">  
                   @HTML.Partial("__pieChartPartial" , chartdata)  
            </Div> 
      b) write a jquery script in page 
          <script>  
           setInterval(function() 
          {$('#__pieChartPartial').load("controller/action")},1000);   # adjust interval time based on your requirement 
         </script>  
      c) In the action method return partial view result
           Return PartialView("__pieChartPartial", chartdata) 
      d) Make output cache, nostore and set duration to 1 min     
      [OutputCache(NoStore=true,Location=System.Web.UI.OutputCacheLocation.Client,Duration=1)]

      e) Enable  sql broker.
      f) Install-Package SqlTableDependency 
      g) Write a code for table watcher and start watching in controller's constructor 
      h) In table dependency change event, refresh chart data.

a）创建局部视图并将其包含在页面中
@HTML.Partial（“\uuu pieChartPartial”，chartdata）
b） 在第页中编写jquery脚本
setInterval（函数（）
{$（'#uu-pieChartPartial'）.load（“控制器/动作”）}，1000）；#根据您的要求调整间隔时间
c） 在action方法中，返回局部视图结果
返回PartialView（“\uu pieChartPartial”，chartdata）
d） 进行输出缓存、nostore并将持续时间设置为1分钟
[OutputCache（NoStore=true，Location=System.Web.UI.OutputCacheLocation.Client，持续时间=1）]
e） 启用sql代理。
f） 安装程序包SqlTableDependency
g） 为表监视程序编写代码，并在控制器的构造函数中开始监视
h） 在表相关性更改事件中，刷新图表数据。

namespace ChartJsDatabase.Models
{
    public class PlannedVsActualModel
    {
        public int Planned { get; set; }
        public int Actual { get; set; }
    }
}

      a) Create a partial view  and include it  with your page 
            <Div id="pieChart">  
                   @HTML.Partial("__pieChartPartial" , chartdata)  
            </Div> 
      b) write a jquery script in page 
          <script>  
           setInterval(function() 
          {$('#__pieChartPartial').load("controller/action")},1000);   # adjust interval time based on your requirement 
         </script>  
      c) In the action method return partial view result
           Return PartialView("__pieChartPartial", chartdata) 
      d) Make output cache, nostore and set duration to 1 min     
      [OutputCache(NoStore=true,Location=System.Web.UI.OutputCacheLocation.Client,Duration=1)]

      e) Enable  sql broker.
      f) Install-Package SqlTableDependency 
      g) Write a code for table watcher and start watching in controller's constructor 
      h) In table dependency change event, refresh chart data.