nv.d3 lineplusbarchart x軸日期值

Question

我有設置日期在lineplusbarchart.Its顯示所有日期01/01/70和yaxis數據顯示爲我需要的日期設置日期問題。

請幫我解決這個問題。

這裏是我的代碼

<script type="text/javascript" lang="javascript"> 

    var chart = nv.models.linePlusBarChart();   
    var startDate; 
    var endDate; 

    $('#dp2').datepicker().on('changeDate', function (ev) { 
     $("#chart svg").html(''); 
     drawgraph(); 
    }); 

    $('#dp1').datepicker().on('changeDate', function (ev) { 
     $("#chart svg").html(''); 
     drawgraph(); 
    }); 

    var drawgraph = function() { 
     var startDate = $("#dp2 input").val(); 
     var endDate = $("#dp1 input").val(); 

     $.ajax({ 
      type: "POST", 
      url: ("Default.aspx/GetData"), 
      data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (result) { 

       var data = $.parseJSON(result.d); 


       var series = [data].map(function (series) { 
        series.values = series.values.map(function (data) { return { x: data[0], y: data[1]} }); 
        return series; 
       }); 

       nv.addGraph(function() { 

        chart.margin({ top: 30, right: 60, bottom: 50, left: 70 }); 

        chart.color(d3.scale.category10().range()); 

        chart.xAxis.tickFormat(function (data) { 

         var dx = series[0].values[data] && series[0].values[data].x || 0;        
         // return d3.time.format('%x')(new Date(dx)) 

         return d3.time.format('%d/%m/%y')(new Date(dx)); 
        }); 

        chart.y1Axis.tickFormat(d3.format(',f')); 
        chart.bars.forceY([0]); 


        d3.select("#chart svg") 
           .datum(series) 
           .transition().duration(1200) 
           .call(chart); 

        nv.utils.windowResize(chart.update); 

        return chart; 

       }); 
      }, 
      error: function (xhr, txt, err) { 
       alert("error connecting to data: " + txt); 
      } 

     }); 

    } 
    window.onload = drawgraph; 

</script> 

和的.cs頁面代碼

protected void Page_Load(object sender, EventArgs e) 
{   
    DateTime date = DateTime.Now; 
    end.Value = date.ToString("MM/dd/yyyy"); 
    start.Value = date.Date.AddDays(-7).ToString("MM/dd/yyyy"); 
} 

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

public static string GetData(DateTime startDate, DateTime endDate) 
{ 

    using (SqlConnection con = new SqlConnection(constring)) 
    { 
     using (SqlDataAdapter sda = new SqlDataAdapter()) 
     { 
      SqlCommand cmd = new SqlCommand(); 
      cmd.Connection = con; 
      cmd = new SqlCommand("TotalCalls_Dashboard", con); 
      cmd.CommandType = CommandType.StoredProcedure; 

      SqlParameter parameter = new SqlParameter(); 

      cmd.Parameters.Add("@startDate", SqlDbType.DateTime).Value = startDate; 
      cmd.Parameters.Add("@endDate", SqlDbType.DateTime).Value = endDate; 

      sda.SelectCommand = cmd; 

      using (DataSet ds = new DataSet()) 
      { 
       sda.Fill(ds); 

       JavaScriptSerializer serializer = new JavaScriptSerializer();     
       ArrayList al = new ArrayList();     

       foreach (DataRow dr in ds.Tables[0].Rows) 
       { 

         Int64[] temp2 = new Int64[2];       

         DateTime test = new DateTime(); 
         test = Convert.ToDateTime(dr["CallDate"].ToString()); 

         var date = new DateTime(1970, 1, 1, 0, 0, 0, test.Kind); 
         var unixTimestamp = System.Convert.ToInt64((test - date).TotalSeconds); 

         temp2[0] = Convert.ToInt64(unixTimestamp); 
         temp2[1] = Int64.Parse(dr["AnsweredCall"].ToString());             
         al.Add(temp2); 

        } 

       Stats stat = new Stats(); 
       stat.key = "AnsweredCall"; 
       stat.bar = true; 
       stat.values = al;      

       return serializer.Serialize(stat);       
      } 
     } 
    } 
} 

公共類統計 { 公共字符串鍵{獲得;組; } public bool bar {get;組; }
public ArrayList values {get;組; }}

感謝

Answer 1

您需要解析的日期，即

series.values = series.values.map(function (data) { return { x: data[0], y: data[1]} }); 

應該是基於你的其他代碼

series.values = series.values.map(function (data) { return { x: d3.time.format("%d/%m/%Y").parse(data[0]), y: data[1]} }); 

。如果日期格式不同，您可能需要調整格式字符串。

那麼你不應該需要chart.xAxis.tickFormat定義了。