highcharts日期不在x轴上正确显示

我的控制器代码：highcharts日期不在x轴上正确显示

[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); 
      }

//输出是returning-

"[{\"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格式具有前向和后向斜线，可能是问题的根源。

与日期格式不正确有什么关系，如果有的话如何纠正它。任何帮助表示赞赏。

来源

2017-08-29 TheChosenOne94

我可以检查什么是'item.TimeofArrival'数据类型？我有点困惑为什么我们得到“\ /日期（1502998529947）\ /”与'\ /' –

@PonmudiVN其日期时间。我采取了frm sql服务器。它在utc时间 – TheChosenOne94

我没有sql server来测试。这里是一个黑客，你可以格式化数据，如 ** data.forEach（（d，i）=> {data [i] .x = dxmatch（/ \ d \ d */g）}）; ** 这里数据'x'被更新为仅包含字符串。在调用displayData之前添加此代码。这不是一个解决方案只是一个解决方法 –

我已经想通了。发布解决方案。在控制器中，将接收到的时间转换为字符串，以便稍后将其转换为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串，解析它在视图，然后通过它迭代转换“x”至日期时间。

function displaydata(data) { 
data = JSON.parse(data); 
data.forEach(function (element, index) { 
       element.x = new Date(element['x']).getTime(); 
       element.y = +element['y']; 

      });

来源

2017-08-29 18:52:58 TheChosenOne94

highcharts日期不在x轴上正确显示

回答

相关问题