Question

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

我希望你能告诉我（英语不好，抱歉）：

我有金属表，点击具体的金属表后，我想看到按日期显示金属价格的图表。

例如，我点击铜;

PricePoint是我的控制器，我在这里打电话给谁？

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

我在PricePoint控制器中调用DrawChart Action：

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

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

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

这是我的视图页面，我想显示图表，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>

当我点击金属时，DrawChart动作返回视图DrawChart.cshtml，然后JavaScript运行统计功能并填充图表数据，这是如何工作的？

当我输入网址时，我有空白页面，没有结果：http://localhost:50101/PricePoint/DrawChart 当url是next时，我会看到来自数据库的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")'上宣布了一个，但您对public ActionResult Statistics(int ?id)的来电并未传入ID。考虑到它可以为空，如果没有传递id，你可能会准备提供一组默认数据，但我想如果这会影响数据库检索的逻辑并影响返回的结果

2）我注意到您在[{1}}中传递了DrawChart操作的链接，但是由于您的DrawChart操作缺少参数，因此未在服务器端捕获，它应该类似于：new { id = item.ID } 。我明白这可能是为了简化它只是为了发布在这里，可能不会影响任何事情，但我想我会指出它

3）注意你从MVC动作返回的内容。 public ActionResult DrawChart(id)中的stats对象应该是一个C＃数组，其中包含数组中每个对象的属性值和年份，如下所示：

return Json(stats,JsonRequestBehavior.AllowGet);

如果你只是将一个字符串传递给返回的Json（）语句，它将无法正常工作，因为它会认为它只是一个长json字符串而不是一个json数组对象。

如果要返回字符串而不是实际的序列化c＃集合，则可以使用以下内容：new[] {new Entry() {value = 20, year = 2008}, new Entry() {value = 10, year = 2009}};

4）案件事宜！确保返回的json包含名称为year和value的属性，就像您在xkey和ykey值上的morris对象中声明的那样。这可能是一个非常微妙的陷阱，因为返回Json（）将完全按照在类中声明的方式序列化json对象，而javascript代码中的趋势是启动变量，并且.Net属性中的小写属性通常用大写如公共return Content(dataString, "application/json");

结论：我通过返回此代码来实现它：

int Year { get; set; }

在您的Morris初始化代码中，从数据声明中删除数组括号，以便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); }而非data : result

解决此问题的第一步是查看您的Statistics方法返回的内容。例如，您可以通过在Chrome中测试您的网站轻松完成此操作，然后点击F12，然后选择网络标签。然后按Ctrl + F5页面，在结果窗格中找到对服务器的调用。单击它，然后选择响应并继续对方法进行故障排除，直到它返回您需要的内容。

如果数据格式错误且不包含Morris所期望的密钥，Morris将抛出错误data : [result]。继续尝试，直到你消失为止，希望你能看到你的图表：）

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

Answer 2

当我从函数（manualy输入）发送数据（值和日期）时，一切正常，json文件是populeted上帝，我看到图表，但是当我从数据库发送数据时，没有图表，但我看到了json文件也是populeted。

这是代码：

  public class YearlyStat
    {
        public string year { get; set; }
        public double value { get; set; }
    }

public ActionResult Statistics(int? id)
    {
        //var result = db.pricepoints.Where(r => r.commodityID.Equals(id));
        var items = from item in db.pricepoints
                    where (item.commodityID == id)
                    select item;

        var stats = new List<YearlyStat>();

        foreach (var item in items)
        {
            stats.Add(new YearlyStat
            {
                year = item.date_of_price.ToShortDateString(),
                value = item.value
            });

        }
        //but this work's
        //string s = "2.2.2002";
        //double v = 20.20;
        //stats.Add(new YearlyStat { year = s, value = v });
        //or
        //stats.Add(new YearlyStat { year = "2.2.2002", value = 20.20 });

        return Json(stats, JsonRequestBehavior.AllowGet);
    }

在两种情况下，类型都是字符串和双精度......

如何在MVC中实现图表的动态数据？

2 个答案: