javascript - 如何在 MVC 中为图表实现动态数据？

Question

我是 ASP.NET MVC 的新手，我在做我自己的项目，但遇到了一些问题。我想用数据库中的数据绘制折线图。

我希望你能理解我(英语不好，抱歉):

我有金属表，单击特定的表后，我想查看按日期显示金属价格的图表。

例如，我点击铜；

PricePoint 是我的 Controller ，我应该在这里调用什么操作？

<a href="@Url.Action("DrawChart", "PricePoint", new { id = item.ID })">@Html.DisplayFor(modelItem => item.name)</a>

我在 PricePoint Controller 中调用 DrawChart Action:

public ActionResult DrawChart()
            {
    return View();
           }

在同一个 Controller 中，我创建了将数据从数据库添加到 json 并将其返回的操作。

 public ActionResult Statistics(int ?id) {
        // here i pull data from database to stats 
        return Json(stats,JsonRequestBehavior.AllowGet);
    }

这是我要显示图表的 View 页面，DrawChart.cshtml 文件。

<script type="text/javascript">
    $.get('@Url.Action("Statistics")', function(result){
        new Morris.Line({
            // ID of the element in which to draw the chart.
            element: 'myfirstchart',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: [
             result
            ],
            // The name of the data record attribute that contains x-values.
            xkey: 'year',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['value'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['Value']
        });
    });


</script>

当我单击 metal 时，DrawChart 操作返回 View DrawChart.cshtml，然后 JavaScript 运行统计函数并为图表填充数据，这是如何工作的？

当我输入 url: http://localhost:50101/PricePoint/DrawChart 时，我有空白页，没有结果 当 url 是下一个时，我看到来自数据库的 json 数据: http://localhost:50101/PricePoint/Statistics

我不知道哪里有问题。当我将示例数据放入脚本中时，就像这样

data: [
      { year: '2008', value: 20 },
      { year: '2009', value: 10 },
      { year: '2010', value: 5 },
      { year: '2011', value: 5 },
      { year: '2012', value: 20 }
    ],

我看到了预期的折线图。再次抱歉，英语不好，希望你能帮助我，我希望你能理解我的问题。

Answer 1

我玩了一下，成功地显示了图表。以下是可能导致您出现问题的一些注意事项:

1) 你对 $.get('@Url.Action("Statistics")' 的调用没有传入一个 id，尽管你在你的操作中声明了一个 id public ActionResult Statistics( int ?id)。考虑到它可以为空，如果没有传递 id，您可能准备提供一组默认数据，但我想我会提到，以防万一这会影响您的数据库检索逻辑并影响结果返回

2) 我注意到您在 new { id = item.ID } 中传递了指向 DrawChart 操作的链接，但是由于您的 DrawChart 操作缺少参数，因此未在服务器端捕获它应该是这样的:public ActionResult DrawChart(id)。我知道这可能是为了简化它只是为了发布在这里并且可能不会影响任何东西但我想我会指出它

3) 注意从 MVC 操作返回的内容。 return Json(stats,JsonRequestBehavior.AllowGet); 中的 stats 对象应该是一个 C# 数组，其中包含数组中每个对象的属性值和年份，例如:

new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};

如果您只是将一个字符串传递给 return Json() 语句，它将无法正常工作，因为它会认为它只是一个长 json 字符串，而不是一个 json 数组对象。

如果你想返回一个字符串而不是一个实际的序列化 C# 集合，那么你可以使用类似这样的东西:return Content(dataString, "application/json");

4) 案例很重要!确保返回的 json 包含名称为年份的属性和每个条目的值，就像您在 morris 对象中声明的 xkey 和 ykey 值一样。这可能是一个非常微妙的陷阱，因为 return Json() 将完全按照类中声明的方式序列化您的 json 对象，而 javascript 代码中倾向于以小写开头的变量和属性。Net 中的属性通常声明为大写如 public int Year { get;放;

结论: 我通过返回这段代码让它工作:

 public ActionResult Statistics(int ?id) {
       var data = new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};

            return Json(data,JsonRequestBehavior.AllowGet);
    }

并且在您的 Morris 初始化代码中从数据声明中删除数组括号，这样 data : result 而不是 data : [result]

解决此问题的第一步是查看统计方法返回的内容。例如，您可以通过在 Chrome 中测试您的网站并按 F12 然后选择“网络”选项卡来非常轻松地做到这一点。然后 Ctrl+F5 页面并在结果 Pane 中找到对服务器的调用。单击它，然后选择 Response 并继续对您的方法进行故障排除，直到它返回您需要的内容。

如果数据格式错误并且不包含 Morris 期望的键，Morris 将抛出一个错误，提示 Uncaught TypeError: Cannot read property 'match' of undefined 。继续尝试，直到你让它消失，希望你应该看到你的图表 :)

PS:最后一件事，我将 Morris 初始化代码包装在 $(document).ready() 调用中