C# MVC5 JavaScript Chart.js 餅圖從 Z9778840A0100CB30C52Z8 服務器實時更新而無需刷新數據庫

Question

我使用 Chart.js 創建了一個餅圖，數據是使用實體框架從 SQL-server 數據庫中獲取的。 這是在 controller 中完成的。

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);
            } 
        }     
    }
}

視圖如下

<div class="col-lg-4">
    <canvas id="chart_3" width="800" height="800"  http-equiv="refresh" content="5"></canvas>
    <h5 style="text-align:center">Total</h5>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Chart/PieChart",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                successFunc(response);
            },
        });

        function successFunc(jsondata) {
            console.log(jsondata);
             window.globalVariable = jsondata;

            console.log(globalVariable[0].Actual)

            //===========Chart Js Code Starts Here ============
            //=================================================
            var ctx = document.getElementById('chart_3').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'doughnut', 
                data: {

                    datasets: [
                      {

                          backgroundColor: ["#228B22", "#f0eeef"],
                          //========== Data for Chart JS ==============
                          data: [globalVariable[0].Actual, (globalVariable[0].Planned - globalVariable[0].Actual)],
                          //===========================================
                          label: ["Actual", "Planned"],
                          borderWidth: 0,


                      }
                    ]
                }, 
                options: {

                    cutoutPercentage: 80, 
                    elements: {
                       center: {
                           text: [(globalVariable[0].Actual/globalVariable[0].Planned*100).toFixed(2)]+"%",
                            color: '#666666', //Default black
                            fontStyle: 'Helvetica', //Default Arial
                            FontSize: 1,
                            sidePadding: 1 //Default 20 (as a percentage)

                        }
                    }
                }

            });
            // ==========Chart Js Chart Ends Here==========
           //==============================================
        }
    });



</script> 

我創建了以下 Model

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

當 SQL 服務器數據庫值發生變化時，我需要更新餅圖。 我們不會刷新整個頁面，而只會刷新圖表，它應該在連續的時間間隔內自動發生。

Answer 1

很簡單，真的。 只需使用chart.config編輯它的屬性，然后運行chart.update()

這里有更多信息： https://www.chartjs.org/docs/latest/developers/updates.html

Answer 2

您可以通過多種方式實現它，這是帶有部分視圖的一種

      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.