用控制器返回的值填充圖表

Question

我創建了一個C＃asp.net MVC應用程序。 控制器顯示如下。 我正在使用高圖表，我想用控制器返回的內容填充圖表。

下面有2個字段，即Mon和Tue，我需要在下面的javascript中填充硬編碼值，以顯示控制器返回的值；

注意：我不確定控制器方法是否有效：（（我是初學者），但是我更關心如何使用控制器返回的值填充圖表。

我的C＃控制器；

    public string timeHour()
    {
        var m = new MyModel();

        m.theTime = getAllTime(); // get all time

        return new JavaScriptSerializer().Serialize(m);
    }

我認為有高位圖；

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'areaspline'
            },
            title: {
                text: 'some title'
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 100,
                borderWidth: 1,
                backgroundColor: '#FFFFFF'
            },
            xAxis: {
                categories: [
                    'Mon',
                    'Tue'
                ],
                plotBands: [{ // visualize the weekend
                    from: 4.5,
                    to: 6.5,
                    color: 'rgba(68, 170, 213, .2)'
                }]
            },

            plotOptions: {
                areaspline: {
                    fillOpacity: 0.5
                }
            },
            series: [{
                name: 'John',
                data: [3, 4]
            }]
        });
    });

Answer 1

首先，我將Controller的返回類型從string更改為JsonResult 。 讓控制器返回ActionResults是一種很好的MVC樣式約定，它使您的代碼更具描述性。

[HttpGet]
public JsonResult timeHour()
{
    var m = new MyModel();
    m.theTime = getAllTime(); // get all time
    return Json(m, JsonRequestBehavior.AllowGet)
}

我相信GET和POST請求都應該對您有用。 看起來getallTime()是冪等的（盡管此處未顯示代碼），因此看起來GET請求應該可以工作。 這可以使用.get（）方法在jQuery中完成：

$(function () {
    $.get("timeHour", null, function(result) {
        console.log("If the GET request is successful, the Controller will return the HighCharts data:");
        console.log(result);
    }, "json");
});

您將需要確保返回給客戶端的JSON是Highcharts喜歡的格式。 現在已經成功調用了Controller（通過AJAX GET請求）並返回了Highcharts數據，您可以回答第二個問題了：

如何使用控制器返回的值填充圖表

...通過Highcharts的“ series.data”文檔 。 如果您閱讀MyModel ，我認為您可以弄清楚如何更改MyModel對象以適合您的需求。