Question

我在MVC 5应用程序中使用JQuery Flot Charts http://www.flotcharts.org/。我希望创建水平条形图，本教程非常有用http://www.jqueryflottutorial.com/how-to-make-jquery-flot-horizontal-bar-chart.html

以下3行代码传递图表插件用于创建图表的数据

var rawData = [[1582.3, 0], [28.95, 1], [1603, 2], [774, 3], [1245, 4], [85, 5], [1025, 6]];
var dataSet = [{ label: "Precious Metal Price", data: rawData, color: "#E8E800" }];
var ticks = [[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]];

我的图表不能使用上面这样的硬编码值，而是传递到我的图表中的数据需要是动态的。我可以使用我的MVC Razor View中的Ajax调用将数据传递到rowData变量，该调用调用一个返回Json的Controller Action（见下文）。

$.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: '/Statistics/GetTestData/',
            error: function () {
                alert("An error occurred.");
            },
            success: function (data) {

            var rawData = [data];
            }

});

我的问题是如何将控制器操作中的数据传递到ticks变量？

我想我需要知道的是，我可以从我的Controller Action返回两组数据，一组用于rawData变量，格式为

[[1582.3, 0], [28.95, 1], [1603, 2], [774, 3], [1245, 4], [85, 5], [1025, 6]]

，其次是

格式的ticks变量

[[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]]

希望这是有道理的。

非常感谢任何反馈或建议。

感谢。

Answer 1

我可以从我的Controller Action返回两组数据

当然，作为一个复合模型。该操作只返回一件事，但该东西可以是一个具有多个属性的模型。我不知道你的对象结构，但是一个人为的模型可能看起来像：

public class ChartViewModel
{
    public RawDataModel RawData { get; set; }
    public TicksModel Ticks { get; set; }
}

然后您的控制器操作将返回该实例：

var model = new ChartViewModel
{
    RawData = GetRawData(),
    Ticks = GetTicks()
};
return Json(model);

然后，此复合模型成为包含其他客户端代码或与此相关的其他视图可能需要的其他属性或行为的便利位置。

然后在客户端代码中，您将根据这些属性设置值：

success: function (data) {
    var rawData = data.RawData;
    var ticks = data.Ticks;
    // etc.
}

Answer 2

你需要像这样的控制器代码

public JsonResult SomeController()
{
  var rawData = rawEnumerable.Select(x => new[] { x.First, x.Second }).ToArray();
  var ticks = ticksEnumerable.Select(x => new[] { x.First, x.Second }).ToArray();
  retu Json(new{ Ticks = ticks ,RawData = rawData });
}

Answer 3

你也可以将它双重包装在列表中（DemoUserDataFrame test = new DemoUserDataFrame(this); /* Create and display the form */ java.awt.EventQueue.invokeLater(new Runnable() { public void run() { test.setVisible(true); } }); public class DemoUserDataFrame extends JFrame { //private final JFrame tempConverter; public DemoUserDataFrame(final JFrame tempConverter) { //this.tempConverter = tempConverter; addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e) { tempConverter.setVisible(true); } }); } ... }）并返回它 - 将映射到List<List<object>>。

示例：

flot

然后在JS：

var grouped =
result.GroupBy(o => o.USER_ID).Select(agent => new
{
    data = new List<List<object>>
    {
        new List<object>
        {
            agent.Key,
            agent.Count()
        }
    },
    color = "#84d455"
}).ToList();

return Json(grouped, JsonRequestBehavior.AllowGet);

将Json数据传递给MVC Razor View

3 个答案: