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

Populate the chart with values returned by controller

本文关键字：填充 控制器 返回      更新时间：2023-09-26

我创建了一个c# asp.net MVC应用。控制器如下图所示。我正在使用高图表，我想用控制器返回的内容填充图表。

下面有两个字段，Mon和Tue，我需要在下面的javascript中填充硬编码值，以显示控制器返回的值;

注意:我不确定控制器方法是否有效:((我是初学者)，但我更关心如何用控制器返回的值填充图表。

My c# controller;

    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]
            }]
        });
    });

首先，我将控制器的返回类型从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请求应该可以工作。这可以在jQuery中使用.get()方法完成:

$(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系列。数据"文档。如果你读了这篇文章，我想你可以弄清楚你需要如何改变MyModel对象来满足你的需求。

相关文章：