javascript - Morris js 动态 ykeys

Question

我正在构建一个图表来跟踪我的产品库存，了解一个月内还剩下多少。我正在尝试从当月开始建立 12 个月的预计库存。

我想尝试一下Morris.js 。在那里demo您有 a 和 b 作为您的 ykeys。我认为这些是产品。如果您可以控制您的产品列表，那么它会非常有效。但如果您的用户添加了新产品怎么办？比如说，产品c、d 和e。您打算如何在不对其进行硬编码的情况下使用图表中的这些产品？

我正在使用 asp.net mvc 5、EF 4 代码优先。我无法想象如何实现它。任何帮助将非常感激。谢谢!

Answer 1

您可以提供为 ykeys 属性动态获取的值数组。如何获取该数组实际上取决于您，但一种可能是通过 Ajax 请求。考虑以下因素:

var request = $.ajax({
   url: getGraphDataUrl,
   type: "GET",
   statusCode: {
        200: function (msg) {
            if(typeof msg != 'undefined' && msg.length > 0) {
                msg = JSON.parse(msg);
                Morris.Line({
                    element: 'line-example',
                    data: msg.data,
                    xkey: 'y',
                    ykeys: msg.ykeys,
                    labels: msg.labels
                });
            }
        }
    });

显然，这是一个非常简化的示例。正如您所看到的，许多属性可以通过 Ajax 请求以 JSON 形式获取。当然，您必须编写形成 JSON 响应的服务器端代码，但我认为这超出了本问题的范围。