Дата в JSON/Highcharts

Question

У меня проблема с графиком datetime в графике с использованием объекта JSON и плагина Highcharts.

Мой код организован:

Моей стороны сервера отправить объект JSON к моей стороне клиента, как только:

 [HttpGet] 
    public JsonResult DadosAtendimentosParticularesPorDentistas() 
    { 

     DateTime DataAtual = DateTime.Now; 
     DateTime InicioMes = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1); 

     var _listaProducao = _session.CreateSQLQuery("SELECT DATA_ATENDIMENTO, VALOR FROM T_LANCAMENTO_PRODUCAO_PARTICULAR " + 
                "WHERE DATA_ATENDIMENTO BETWEEN :INICIO AND :FIM") 
            .SetParameter("INICIO", InicioMes.AddMonths(-3)) 
            .SetParameter("FIM", DataAtual) 
            .List(); 



     return Json(_listaProducao, JsonRequestBehavior.AllowGet); 
    } 

Моего клиент сторона получает объект JSON и сделать следующее лечение:

<script type="text/javascript"> 

function producaoDentista(data) { 

    Highcharts.setOptions({ 
     global: { 
      useUTC: false 
     } 
    }); 

    $('#testegrafico').highcharts({ 

     chart: { 
      type: 'spline' 
     }, 
     title: { 
      text: 'Grafico de Faturamento', 
      x: -20 
     }, 
     subtitle: { 
      text: 'Amostragem de Convenio e Particular', 
      x: -20 
     }, 
     xAxis: { 
      type: "datetime", 
      categories: Date, 
      tickPixelInterval: 150, 
      maxZoom: 5, 
      dateTimeLabelFormats: { 
       month: '%b %e, %Y', 
       year: '%Y' 
      } 

      //dateTimeLabelFormats: { 
      // month: '%b %e, %Y', 
      // year: '%Y' 
      //} 
     }, 
     yAxis: { 
      title: { 
       text: 'Valor em R$' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }], 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'middle', 
       borderWidth: 0 
      }, 
     }, 
     series: [{ 

      name: 'Atendimento Particular', 
      data: data 
      //name: 'Atendimento Particular', 
      //data: data, 
      //tooltip: { 
      // pointFormat: 'R$:{point.y:.2f}', 
      //} 
     //}, { 
     // name: 'Atendimento Convênio', 
     // data: [2.0, 3.1, 10, 40.59, 100, 200, 500, 10, 500,11, 33] 
     ,}] 
    }); 
} 
$(document).ready(function() { 
    $.ajax({ 
     url: 'GraficoAtendimento/DadosAtendimentosParticularesPorDentistas', 
     type: 'GET', 
     async: true, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      producaoDentista(data) 
     } 
    }); 
}); 

</script> 

Мой JSON состоит в следующих данных:

[[ "/ Date (1418 223600000)/", 80], ["/Дата (1415631600000)/", 10], ["/Дата (1415804400000)/", 40], ["/Дата (1420077600000)/", 8], ["/Дата (1420164000000) /», 10], [ "/ Дата (1420164000000) /", 30], [ "/ Дата (1420164000000) /", 140], [ "/ Дата (1420164000000) /", 10], [ "/ Дата (1420423200000) /", 560]]

дат на графике показываются так:/Date (1418223600000)

Как решить эту проблему?

Answer 1

Ваш вопрос о том, что формат передачи JSON для даты с .NET не легко понять JavaScript и должен быть преобразован в целочисленную временную метку для HighCharts для работы с ней. Вы можете адресовать это на стороне сервера или на стороне клиента, но для этого на стороне клиента вам необходимо либо преобразовать данные перед отправкой в ​​HighCharts, либо предоставить HighCharts функцию формата для преобразования.

Преобразования данных в целое перед тем графиками

Здесь вы массировать свои данные, прежде чем передать его Highcharts путем разбора всех строк с датой, что .NET дает вам в метках времени целых числа. Это позволяет HighCharts использовать временные метки для форматирования.

$(document).ready(function() { 

    function parseJsonDateToTimeStamp(value) { 
     return parseInt(value.substr(6), 10); // The 6 is for trimming '/Date(' 
    } 

    $.ajax({ 
     url: 'GraficoAtendimento/DadosAtendimentosParticularesPorDentistas', 
     type: 'GET', 
     async: true, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 

      // Iterate data and convert all date strings to integers using 
      // the parseJsonDateToTimeStamp function above. 
      // 
      // Without knowing the JSON structure I cannot show code to do this, but it 
      // should be done before calling producaoDentista() 
      // 

      producaoDentista(data) 
     } 
    }); 
}); 

Эта функция обрезает первую часть строки, которую вы получаете от .NET выключения и преобразует часть временной метки в целое, чтобы перейти к Дата() конструктор. Вы должны запустить эту функцию против каждого значения даты в JSON, который вы получаете, когда он впервые получен, но перед передачей данных в HighCharts для рендеринга.

Настройка Highcharts конфигурации для форматирования на лету

Здесь вы изменяете Highcharts конфигурации, чтобы поставить его с помощью функции форматирования на XAxis, который будет конвертировать ваши значения во время выполнения. Это немного более чистое решение, но вы теряете нормальную способность форматировать даты с dateTimeLabelFormats и должны использовать HighCharts.dataFormat() вручную.

$('#testegrafico').highcharts({ 

    chart: { 
     type: 'spline' 
    }, 
    title: { 
     text: 'Grafico de Faturamento', 
     x: -20 
    }, 
    subtitle: { 
     text: 'Amostragem de Convenio e Particular', 
     x: -20 
    }, 
    xAxis: { 
     type: "datetime", 
     categories: Date, 
     tickPixelInterval: 150, 
     maxZoom: 5, 
     labels: { 
      formatter: function() { 

       // Parse the date string to an integer and format it 
       return HighCharts.dateFormat('%b, %e, %Y', parseInt(this.value.substr(6), 10)); 
      } 
     } 
    }, 
    yAxis: { 
     title: { 
      text: 'Valor em R$' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }], 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
    }, 
    series: [{ 

     name: 'Atendimento Particular', 
     data: data 
     //name: 'Atendimento Particular', 
     //data: data, 
     //tooltip: { 
     // pointFormat: 'R$:{point.y:.2f}', 
     //} 
    //}, { 
    // name: 'Atendimento Convênio', 
    // data: [2.0, 3.1, 10, 40.59, 100, 200, 500, 10, 500,11, 33] 
    ,}] 
}); 

Answer 2

Создать адаптер

public class JsonAdapter : JsonResult 
{ 
    /// <summary> 
    /// <para></para> 
    /// </summary> 
    private const string _dateFormat = "dd/MM/yyyy_HH:mm:ss"; 

    /// <summary> 
    /// <para></para> 
    /// </summary> 
    /// <param name="context"></param> 
    public override void ExecuteResult(ControllerContext context) 
    { 
     if (context == null) 
     { 
      throw new ArgumentNullException("context"); 
     } 

     HttpResponseBase response = context.HttpContext.Response; 

     if (!String.IsNullOrEmpty(ContentType)) 
     { 
      response.ContentType = ContentType; 
     } 
     else 
     { 
      response.ContentType = "application/json"; 
     } 
     if (ContentEncoding != null) 
     { 
      response.ContentEncoding = ContentEncoding; 
     } 
     if (Data != null) 
     { 
      JavaScriptSerializer serializer = new JavaScriptSerializer(); 

      serializer.RegisterConverters(new JavaScriptConverter[] { new DateTimeJavaScriptConverter() }); 

      response.Write(serializer.Serialize(Data)); 
     } 
    } 
} 

public class DateTimeJavaScriptConverter : JavaScriptConverter 
{ 
    public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer) 
    { 
     return new JavaScriptSerializer().ConvertToType(dictionary, type); 
    } 

    public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer) 
    { 
     if (!(obj is DateTime)) return null; 
     DateTime data = (DateTime)obj; 
     return new DateString(data == DateTime.MinValue || data == DateTime.MaxValue ? string.Empty : data.ToString("dd/MM/yyyy_HH:mm:ss")); 
    } 

    public override IEnumerable<Type> SupportedTypes 
    { 
     get { return new[] { typeof(DateTime) }; } 
    } 

    private class DateString : Uri, IDictionary<string, object> 
    { 
     public DateString(string str) : base(str, UriKind.Relative) 
     { 
     } 

     void IDictionary<string, object>.Add(string key, object value) 
     { 
      throw new NotImplementedException(); 
     } 

     bool IDictionary<string, object>.ContainsKey(string key) 
     { 
      throw new NotImplementedException(); 
     } 

     ICollection<string> IDictionary<string, object>.Keys 
     { 
      get { throw new NotImplementedException(); } 
     } 

     bool IDictionary<string, object>.Remove(string key) 
     { 
      throw new NotImplementedException(); 
     } 

     bool IDictionary<string, object>.TryGetValue(string key, out object value) 
     { 
      throw new NotImplementedException(); 
     } 

     ICollection<object> IDictionary<string, object>.Values 
     { 
      get { throw new NotImplementedException(); } 
     } 

     object IDictionary<string, object>.this[string key] 
     { 
      get 
      { 
       throw new NotImplementedException(); 
      } 
      set 
      { 
       throw new NotImplementedException(); 
      } 
     } 

     void ICollection<KeyValuePair<string, object>>.Add(KeyValuePair<string, object> item) 
     { 
      throw new NotImplementedException(); 
     } 

     void ICollection<KeyValuePair<string, object>>.Clear() 
     { 
      throw new NotImplementedException(); 
     } 

     bool ICollection<KeyValuePair<string, object>>.Contains(KeyValuePair<string, object> item) 
     { 
      throw new NotImplementedException(); 
     } 

     void ICollection<KeyValuePair<string, object>>.CopyTo(KeyValuePair<string, object>[] array, int arrayIndex) 
     { 
      throw new NotImplementedException(); 
     } 

     int ICollection<KeyValuePair<string, object>>.Count 
     { 
      get { throw new NotImplementedException(); } 
     } 

     bool ICollection<KeyValuePair<string, object>>.IsReadOnly 
     { 
      get { throw new NotImplementedException(); } 
     } 

     bool ICollection<KeyValuePair<string, object>>.Remove(KeyValuePair<string, object> item) 
     { 
      throw new NotImplementedException(); 
     } 

     IEnumerator<KeyValuePair<string, object>> IEnumerable<KeyValuePair<string, object>>.GetEnumerator() 
     { 
      throw new NotImplementedException(); 
     } 

     IEnumerator IEnumerable.GetEnumerator() 
     { 
      throw new NotImplementedException(); 
     } 
    } 
} 

Затем используйте:

return JsonAdapter(_listaProducao, JsonRequestBehavior.AllowGet);