javascript - 带有来自 C# 的动态数据的莫里斯图
问题描述
我正在尝试在 ASP.NET Web 应用程序中构建莫里斯图,其中填充该图的数据来自 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# 类:
public class GraphChartData
{
public string process { get; set; }
public string xKey { get; set; }
public string yKey { get; set; }
public GraphChartData(string process, string _xKey, string _yKey)
{
this.process = process;
this.xKey = _xKey;
this.yKey = _yKey;
}
public GraphChartData()
{
}
}
图表结果如下: Morris Graph
解决方案
我做了一个WebMethod
模拟动态数据的:
它生成随机数量的线和进程(2 到 5 之间),然后返回一个包含标签、yKey 和莫里斯线图所需数据的对象。
[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
};
}
用于从以下位置获取数据的 JavaScript 代码WebMethod
GetGraphData
:
$(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
});
}
请使用从生成的数据尝试以下代码段WebMethod
:
var data =
[
{ "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 = new Morris.Line({
element: 'chartProcesses',
data : data,
xkey: ['datetime'],
ykeys: ['processName1', 'processName2'],
labels: ['ProcessName1', "Process Name1"],
hideHover: 'auto',
resize: true,
parseTime: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>
<div id="chartProcesses"></div>
确保将parseTime
属性设置为false
:
parseTime: false
推荐阅读
- wxpython - 如何删除 MenuBar 中的 Window 下拉菜单?
- python - Python 中的网络爬虫,用于同一网页的多篇文章
- php - 删除 URL 中的空格并使用 htaccess 将所有内容变为小写
- python - Python Multiprocessing - 等到一个进程完成其工作
- python - 如何使用“actor.collidepoint(pos)”检查pygame中演员之间的碰撞
- python - 匹配熊猫数据框中的名称并更新目标值
- scala - 编写一个可以根据不同谓词过滤用户的通用函数
- google-cloud-platform - 安全的“hello world”谷歌云功能
- angular - 甜甜圈图没有颜色
- javascript - 由于 mime 不匹配,资源被阻止