Javascript C语言动态数据的Morris图#

我试图在ASP.NET web应用程序中构建一个Morris图，其中填充该图的数据来自一个ajax帖子到一个C#方法

返回数据为：

[{"process":"W3WP","xKey":"2018-8-1 7:00","yKey":"60"},
{"process":"Proc","xKey":"2018-8-1 7:00","yKey":"35"},
{"process":"W3WP","xKey":"2018-8-1 7:30","yKey":"75"},
{"process":"Proc","xKey":"2018-8-1 7:30","yKey":"30"},
{"process":"W3WP","xKey":"2018-8-1 8:00","yKey":"70"},
{"process":"Proc","xKey":"2018-8-1 8:00","yKey":"39"},
{"process":"W3WP","xKey":"2018-8-1 8:30","yKey":"71"},
{"process":"Proc","xKey":"2018-8-1 8:30","yKey":"30"}]

基本上，我想要一个图表，显示进程列表（动态）的CPU使用情况。每个过程都应该用一行表示。 使用以下JavaScript构建图形时，图形显示不正确：

var procChart = new Morris.Line({
    element: 'chartProcesses',
    data: $.parseJSON(ProcGraph()),
    xkey: ['xKey'],
    ykeys: ['yKey'],
    labels: ['process'],
    hideHover: 'auto',
    resize: true
});

JSON帖子如下：

function ProcGraph() {
    var data = "";

    $.ajax({
        type: 'POST',
        url: 'Servers.aspx/GetGraphData',
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        data: {},
        success: function (result) {                                            
            data = result.d;
            alert(data);
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    return data;
}

最后，C#类：

图表结果如下：

---

我制作了一个模拟动态数据的

WebMethod

：

它生成随机数目的线和进程（2到5），然后返回一个对象，其中包含标签、YKEY和Morris线图所需的数据

[WebMethod]
public static object GetGraphData()
{
    Random random = new Random();

    List<Dictionary<string, object>> processes = new List<Dictionary<string, object>>();
    List<string> labels = new List<string>();
    List<string> yKeys = new List<string>();
    bool labelsDone = false;

    int nbLines = random.Next(2, 5);
    int nbProcesses = random.Next(2, 5);

    for (int i = 0; i < nbLines; i++)
    {
        Dictionary<string, object> processLine = new Dictionary<string, object>();

        string time = DateTime.Now.AddMinutes(i).ToString();

        processLine.Add("datetime", time);

        for (int j = 0; j < nbProcesses; j++)
        {
            processLine.Add($"processName{j + 1}", random.Next(100));

            if (!labelsDone)
            {
                labels.Add($"Process Name{j + 1}");
                yKeys.Add($"processName{j + 1}");
            }
        }

        labelsDone = true;

        processes.Add(processLine);
    }

    return new
    {
        labels = labels,
        ykeys = yKeys,
        processes = processes
    };
}

请使用从

WebMethod

生成的数据尝试以下代码段：

var数据=
[
{“datetime”：“14/08/2018 14:41:28”，“processName1”：2，“processName2”：50}，
{“datetime”：“14/08/2018 14:42:28”，“processName1”：20，“processName2”：34}，
{“datetime”：“14/08/2018 14:43:28”，“processName1”：17，“processName2”：81}，
{“datetime”：“14/08/2018 14:44:28”，“processName1”：86，“processName2”：67}
]
var procChart=新莫里斯线({
元素：'图表进程'，
数据：数据，
xkey:['datetime']，
ykeys:['processName1'，'processName2']，
标签：['ProcessName1'，“ProcessName1”]，
隐藏：“自动”，
调整大小：对，
解析时间：false
});

显示不正确
：可以显示吗？您的解决方案是使用静态数据。我需要能够动态地执行此操作。W3WP和Proc可能并不总是列表中的进程……这很有效！非常感谢。我试着使用ExpandoObject，但是运气不好——尽管这样做有效！
[WebMethod]
public static object GetGraphData()
{
    Random random = new Random();

    List<Dictionary<string, object>> processes = new List<Dictionary<string, object>>();
    List<string> labels = new List<string>();
    List<string> yKeys = new List<string>();
    bool labelsDone = false;

    int nbLines = random.Next(2, 5);
    int nbProcesses = random.Next(2, 5);

    for (int i = 0; i < nbLines; i++)
    {
        Dictionary<string, object> processLine = new Dictionary<string, object>();

        string time = DateTime.Now.AddMinutes(i).ToString();

        processLine.Add("datetime", time);

        for (int j = 0; j < nbProcesses; j++)
        {
            processLine.Add($"processName{j + 1}", random.Next(100));

            if (!labelsDone)
            {
                labels.Add($"Process Name{j + 1}");
                yKeys.Add($"processName{j + 1}");
            }
        }

        labelsDone = true;

        processes.Add(processLine);
    }

    return new
    {
        labels = labels,
        ykeys = yKeys,
        processes = processes
    };
}

$(document).ready(function () {
    ProcGraph();
});

function ProcGraph() {
    var data = "";
    $.ajax({
        type: 'POST',
        url: 'Servers.aspx/GetGraphData',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: {},
        success: function (result) {
            data = result.d;
           SetMorris(data)
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    return data;
}

function SetMorris(data) {
    var procChart = new Morris.Line({
        element: 'chartProcesses',
        data: data.processes,
        xkey: ['datetime'],
        ykeys: data.ykeys,
        labels: data.labels,
        hideHover: 'auto',
        resize: true,
        parseTime: false
    });
}