使用C＃從SQL數據庫動態更改圖表數據

Question

這是我的圖表代碼。

<!-- Graphs -->
<script src="../Scripts/Chart.min.js"></script>
<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      datasets: [{
        data: [1, 6, 2, 5, 9, 5, 6],
        label: "Issues Resolved",
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: '#007bff',
        borderWidth: 4,
        pointBackgroundColor: '#007bff'
      }, {
                data: [8, 5, 8, 6, 0, 2, 2],
                label: "Issues Raised",
                lineTension: 0,
                backgroundColor: 'transparent',
                borderColor: '#ff8400',
                borderWidth: 4,
                pointBackgroundColor: '#ff8400'
          }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: false
          }
        }]
      },
        legend: {
            display: true
        },
        title: {
                  display: true,
                  text: 'Issues Raised VS Issues Resolved'
                }
    }
    });
</script>

該圖雖然工作正常，但是靜態的。 我想問的是，對於引發的問題和問題，我是否可以動態更改data datasets （一周中的每一天總是有7個值）在運行時從我的.aspx.cs（將從我的SQL數據庫獲取此數據）中解析。 如果是這樣，怎么辦？

謝謝您的幫助。

Answer 1

我遇到了類似的問題，並找到了解決方案。 該解決方案要求您using System.Web.Services;來使用using System.Web.Services; 我將留給您以實現對SQL數據庫的訪問。 但是希望該解決方案也能為您提供幫助！

嘗試在.ASPX文件中使用以下內容：

<!-- Graphs -->
<script src="../Scripts/Chart.min.js"></script>
<script>
    $(function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'BackendFileName.aspx/GetChartData', // change to your .aspx filename
            data: '{}',
            success: function (response) {
                drawChart(response.d);
            },

            error: function () {
                console.error("Error loading data! Please try again.");
            }
        });
    })

    function drawChart(dataValues) {
        var issuesResolved = [];
        var issuesRaised = [];
        for (var i = 0; i < dataValues.length; i++) {
            issuesResolved[i] = dataValues[i].issuesResolved;
            issuesRaised[i] = dataValues[i].issuesRaised;
        }
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                datasets: [{
                    data: issuesResolved,
                    label: "Issues Resolved",
                    lineTension: 0,
                    backgroundColor: 'transparent',
                    borderColor: '#007bff',
                    borderWidth: 4,
                    pointBackgroundColor: '#007bff'
                }, {
                    data: issuesRaised,
                    label: "Issues Raised",
                    lineTension: 0,
                    backgroundColor: 'transparent',
                    borderColor: '#ff8400',
                    borderWidth: 4,
                    pointBackgroundColor: '#ff8400'
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false
                        }
                    }]
                },
                legend: {
                    display: true
                },
                title: {
                    display: true,
                    text: 'Issues Raised VS Issues Resolved'
                }
            }
        });
    }
</script>

然后在后端文件中添加以下方法：

// Arbitrary class to hold required data from SQL Database
public class ChartDetails
{
    public string IssuesResolved { get; set; }

    public string IssuesRaised { get; set; }

    public ChartDetails()
    {
    }
}

// Method that will be called by JQuery script
[WebMethod]
public static List<ChartDetails> GetChartData()
{
    List<ChartDetails> dataList = new List<ChartDetails>();

    // Access SQL Database Data
    // Assign SQL Data to List<ChartDetails> dataList

    return dataList;
}

Answer 2

您當然可以。 在這里查看文檔，您只需要實現AJAX輪詢即可查看源數據集是否已更改。

Answer 3

我相信您可以做的是：

1. 在您的代碼后面創建一個類級別的字符串變量，用於保存序列化數組，例如protected string weeklyData;
2. 在Page_Load事件處理程序中，從SQL數據庫中獲取數據，並根據存儲的數據填充數字數組int或小數或浮點數。 假設您最終得到一個包含數據的數組

int[] data = [8, 5, 8, 6, 0, 2, 2];

3. 使用JavaScriptSerializer類將其序列化為字符串，然后將其分配給weeklyData類變量，如下所示：

   JavaScriptSerializer serializer = new JavaScriptSerializer(); weeklyData = serializer.Serialize(data);

4. 在圖表初始化代碼中分配weeklyData變量，例如： data: <%= weeklyData %>,在此處輸入代碼

另一個更好的選擇是編寫一個WEB API服務，該服務將公開一個端點，以json數組格式獲取每周數據。 然后，您可以使用jquery的get方法獲取數據，然后初始化圖表

$.get('{enpointurl}', function(weeklyData) {
  //Write chart initialization code here and pass weekly data to chart data option
});