我的控制器代码:
[HttpPost]
public JsonResult getJSONresult(string data)
{
Entities entities = new Entities();
List<MyModel> vendlist = new List<MyModel>();
var vnlist = (from c in entities.table
select c);
foreach (var item in vnlist)
{
MyModel temp = new MyModel();
temp.x= item.TimeofArrival;
temp.y= item.Value;
vendlist.Add(temp);
}
string output = new JavaScriptSerializer().Serialize(vendlist);
return Json(output);
}
//输出正在返回 -
"[{\"x\":\"\\/Date(1502998529947)\\/\",\"y\":3.85},
{\"x\":\"\\/Date(1502998546947)\\/\",\"y\":3.85},
{\"x\":\"\\/Date(1502998563937)\\/\",\"y\":3.85},
{\"x\":\"\\/Date(1502998580940)\\/\",\"y\":3.85},
{\"x\":\"\\/Date(1502998597950)\\/\",\"y\":3.85}"
查看:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
$.ajax({
url: '/MyTemplate2/getJSONresult',
type: "POST",
cache: false,
success: function (data) {
//result
console.log("Data :" + data);
displaydata(data);
// output received:
/*"[{"x":"\ /Date(1502998529947)\ /","y":3.85},
{"x":"\/Date(1502998546947)\ /","y":3.85},
{"x":"\/Date(1502998563937)\ /","y":3.85}....}]"*/
}, error: function (error) {
console.log(error.responseText);
}
});
function displaydata(data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Data'
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'data'
}
},
plotOptions: {
series: {
turboThreshold: 0
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
data: data
}]
});
}
未正确绘制x轴。 注意:从控制器传递的JSON格式有正斜率和反斜杠,可能是问题的根源。
是否与不正确的日期格式有关,如果有,请如何纠正。 任何帮助表示赞赏。
答案 0 :(得分:0)
我已经弄清楚了。发布解决方案。 在控制器中,将接收的时间转换为字符串,以便以后可以将其转换为Highcharts支持的格式,而不是C#默认格式。
foreach (var item in vnlist)
{
MyModel temp = new MyModel();
temp.x= item.TimeofArrival.ToString("yyyy-MM-dd HH:mm:ss.fff");//change the datatype of x to string
temp.y= item.Value;
vendlist.Add(temp);
}
当控制器返回JSON字符串时,在View中解析它,然后转换&#39; x&#39;通过迭代来到日期时间。
function displaydata(data) {
data = JSON.parse(data);
data.forEach(function (element, index) {
element.x = new Date(element['x']).getTime();
element.y = +element['y'];
});