Question

我创建了一个C＃asp.net MVC应用程序。控制器显示如下。我正在使用高图表，我想用控制器返回的图表填充图表。

下面有两个字段，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() method：

在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" documentation。如果您阅读本文，我认为您可以弄清楚如何更改MyModel对象以满足您的需求。

使用控制器返回的值填充图表

1 个答案: