1

我创建了一个 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]
            }]
        });
    });
4

1 回答 1

0

首先，我会将控制器的返回类型从 更改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对象以满足您的需求。

于 2015-02-03T15:02:55.480 回答