highchartsは、x軸上で正しく表示されない日

Question

私のコントローラコード：x軸がされていない

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

      } 

：

[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}" 

ビューです適切にプロットされます。 注：コントローラーから渡されるJSON形式には、問題の原因となる前方スラッシュと後方スラッシュがあります。

不適切な日付形式とは関係がありますか？そうであれば、それを修正する方法がありますか。 何か助けていただければ幸いです。

Answer 1

私はそれを理解しました。ソリューションの転記。 コントローラでは、受け取った時刻を文字列に変換し、後でC＃のデフォルトフォーマットではなくHighchartsでサポートされているフォーマットに変換できます。

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で解析してから、 'x'をそれを反復処理してdatetimeに変換します。

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

      });