高位图日期在x轴上未正确显示

时间:2017-08-29 02:32:44

标签: javascript jquery highcharts

我的控制器代码:

 [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格式有正斜率和反斜杠,可能是问题的根源。

是否与不正确的日期格式有关,如果有,请如何纠正。 任何帮助表示赞赏。

1 个答案:

答案 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'];

            });