AJAX在C#中如何實現數據的實時圖表展示

要在C#中使用AJAX實時更新圖表，你需要結合ASP.NET MVC或Web Forms以及JavaScript庫（例如jQuery）和圖表庫（例如Chart.js、Highcharts等）。下面是一個簡單的示例，展示了如何在ASP.NET MVC項目中使用AJAX和Chart.js實時更新圖表。

1. 首先，創建一個ASP.NET MVC項目并安裝必要的庫。在項目中添加對jQuery和Chart.js的引用。在Views\Shared\_Layout.cshtml文件中添加以下代碼：

2. 在Controllers文件夾中創建一個名為ChartController.cs的控制器，并添加一個名為GetData的方法，該方法將返回JSON格式的數據。這里我們使用隨機生成的數據作為示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace YourProjectName.Controllers
{
    public class ChartController : Controller
    {
        public JsonResult GetData()
        {
            var random = new Random();
            var data = new List<int>();

            for (int i = 0; i < 10; i++)
            {
                data.Add(random.Next(1, 100));
            }

            return Json(data, JsonRequestBehavior.AllowGet);
        }
    }
}

3. 在Views\Chart文件夾中創建一個名為Index.cshtml的視圖，并添加以下代碼：

@{
    ViewBag.Title = "Chart";
}<canvas id="myChart" width="400" height="200"></canvas><script>
    $(document).ready(function () {
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: 'Random Data',
                    data: [],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function updateChart() {
            $.ajax({
                url: '/Chart/GetData',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    myChart.data.datasets[0].data = data;
                    myChart.update();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }

        // Update chart every 5 seconds
        setInterval(updateChart, 5000);
    });
</script>

這段代碼首先創建一個空的柱狀圖，然后定義一個名為updateChart的函數，該函數使用AJAX從GetData方法獲取數據并更新圖表。最后，我們使用setInterval每5秒調用一次updateChart函數，以實時更新圖表。

現在運行項目，你應該能看到一個實時更新的柱狀圖。請注意，這只是一個簡單的示例，你可以根據需要修改代碼以適應你的項目需求。